Vue.js Form Input Binding with Radio Option

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 Radio Option uses the checked property and change event for the v-model directive. The initial value and the checked value are ignored and are updated once the user interacts with the element.

Syntax: Create an input element of radio type and add the v-model directive as follows:

// Data initialized in Vue.js
data() {
  return {
    tutorials: '',
  }
},

<!-- Radio option -->
<input v-model="tutorials" 
       type="radio" 
       value="Data Structures"
       name="ds" />
<label for="ds">Data Structures</label>

Example: In the following example, we have three radio options with the v-model directive from which we can select any one of them. After selecting the radio option, the value of the radio option is stored in the v-model which can be shown on the webpage.

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 formed.

Project Structure

Step 2: Inside the App.vue file, add the data member tutorials which will be used for the v-model in the data section of the script file. The v-model uses a data member to bind the data and it is very simple to implement.

App.vue:

Javascript

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

Step 3: Now, in the template section, add the input elements of radio type and mention the tutorials as the v-model. When any radio option is selected, we will get the selected radio element’s value. It is necessary to mention the value of input elements.

App.vue:

Javascript

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

Step 4: Run the project using the following command and see the output.

npm run dev

Output: It will run the project on http://localhost:3000/ and the result will be as follows:

Reference: https://vuejs.org/guide/essentials/forms.html#radio