How to Define Values for Checked and Unchecked Checkbox with Vue JS

In this tutorial, we will learn how to define values for checked and unchecked checkbox with Vue JS.

Check whether a checkbox is checked or not in Vue JS

In Vue.js, you can define values for a checked and unchecked checkbox using the v-model directive. The v-model directive binds the checkbox to a data property, and you can specify the values for the checked and unchecked states.

Here's an example:

<template>
  <div>
    <input type="checkbox" v-model="isChecked" :true-value="trueValue" :false-value="falseValue">
    <label>Checkbox</label>
    
    <p>Checked: {{ isChecked ? trueValue : falseValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
      trueValue: 'Yes',  // Value when the checkbox is checked
      falseValue: 'No'  // Value when the checkbox is unchecked
    };
  }
}
</script>

In this example:

• The v-model="isChecked" binds the checkbox to the isChecked data property.
• :true-value and :false-value attributes are used to define the values for the checked and unchecked states, respectively.
• The paragraph (<p>) below the checkbox displays the current state based on the values defined.

Adjust the trueValue and falseValue properties to set the values you want for the checked and unchecked states.