Vue.js Form Input Binding with Checkbox option

Last Updated : 06 Apr, 2022

Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.

Input Binding is used to sync and maintain the state of form input elements with the corresponding state in javascript. So Vue.js provides a v-model directive which makes the task of maintaining the state of the forms easier by the simple implementation.

Input Binding with Checkbox Option use checked property and change event for the v-model directive. We can use a single option or multiple options for the checkbox element.

Syntax:

For single check box:

data() {
  return {
    checked: '',
  }
},

<input v-model="checked" type="checkbox" name="check" />
<label for="check">{{checked}}</label>

For multiple check box:

data() {
  return {
    tutorials: [],
  }
},

<input type="tutorials" id="Option1" value="Option1" v-model="checkedNames" />
<label for="Option1">Option1</label>

<input type="tutorials" id="Option2" value="Option2" v-model="checkedNames" />
<label for="Option2">Option2</label>

<input type="tutorials" id="Option3" value="Option3" v-model="checkedNames" />
<label for="Option3">Option3</label>

Example: In the following example, we have multiple checkboxes using the v-model directive for input binding. For multiple checkboxes, we store the value of input inside an array and it is done using the v-model itself.

Step 1: Create a new Vue.js project using the npm node.js package manager.

npm init vue@latest

Enter the project name and preset the project as follows.

Project Structure: After successful installation, the following project structure will be displayed.

Project Structure

Step 2: Inside the App.vue file, in the data section of the script file, add the data member tutorials and checked which will be used for the v-model.

App.vue

<script> 
export default { 
  data() { 
    return { 
      checked: '', 
      tutorials: [], 
    } 
  }, 
} 
</script>

Step 3: For implementing the single checkbox with the checked v-model, we can follow the below code:

Javascript

<center> 
    <input v-model="checked" type="checkbox" name="check" /> 
    <label for="check">{{ checked }}</label> 
  
    <p>Tutorials:{{ tutorials }}</p> 
</center>

Step 4: For implementing the multiple checkboxes to select multiple items using a single v-model, we will follow as below:

App.vue

<template> 
  <center> 
    <h1 style="text-align:  
        center; color: green"> 
        GeeksforGeeks 
    </h1> 
    <strong> 
        Vue.js Form Input Value Binding with Checkbox option 
    </strong> 
    <br /> 
  </center> 
  <center> 
    <input 
      v-model="tutorials"
      type="checkbox"
      value="Data Structures"
      name="ds"/> 
    <label for="ds">Data Structures</label><br /> 
    <input v-model="tutorials" 
           type="checkbox" 
           value="Algorithms" 
           name="al" /> 
    <label for="al">Algorithms</label><br /> 
    <input 
      v-model="tutorials"
      type="checkbox"
      value="Machine Learning"
      name="ml"/> 
    <label for="ml">Machine Learning</label> 
    <p>Tutorials: {{ tutorials }}</p> 
  </center> 
</template>