15. Form input bindings

Welcome to a binding discussion! Now that we know all about this superstar, v-model, which is used to achieve two-way data binding on form elements, let’s visually understand how Vue works magically under the hood by picking the correct way to update a particular HTML element based on whether it is a radio button or a checkbox or a select element.

Today, we will be covering the following,

Single checkbox
Multiple checkboxes
Radio buttons
Single select dropdown
Multi-select dropdown
Dropdown with dynamic options

First things first! Below is the initial code that we will be working with,

Starting code

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>

index.js

new Vue({
  el: "#app",
  data: {
  }
});

Single checkbox

Look at the below code snippet,

index.html (snippet)

<div>
  <h4>Single checkbox with a boolean value</h4>
  <!-- form input bindings: single checkbox -->
  <input type="checkbox" id="single" v-model="chosen">
  <label for="single">{{ chosen }}</label>
</div>

index.js

new Vue({
  el: "#app",
  data: {
    chosen: false
  }
});

We have a checkbox of id, single. Let’s have a variable chosen, which is assigned to be false in the data property of the Vue instance. Selecting the checkbox makes the value of chosen to be true. That’s how v-model works in case of Boolean values when used with the input type checkbox.

Multiple checkboxes

Now let us have four checkboxes whose values are all bound to the same array.

index.html (snippet)

<div>
  <h4>Multiple checkboxes with values of an array</h4>
  <!-- value bindings: multiple checkboxes -->
  <input type="checkbox" id="cars" value="Cars" v-model="checkedFilms">
  <label for="cars">Cars</label>
  <input type="checkbox" id="brave" value="Brave" v-model="checkedFilms">
  <label for="brave">Brave</label>
  <input type="checkbox" id="up" value="Up" v-model="checkedFilms">
  <label for="up">Up</label>
  <input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms">
  <label for="ratatouille">Ratatouille</label>
  <br/>
  <span>Selected pixar films are: {{ checkedFilms }}</span>
</div>

index.js (snippet)

data: {
  checkedFilms: []
}

So, all four input elements are of type checkbox and each has a two-way binding to the array ‘checkedFilms’. Note that the initial value of the array is empty in the Vue instance’s data property. Here v-model works in such a way that, the array, checkedFilms gets populated with the value of the checkboxes that are selected.

Radio buttons

It is easy to guess how v-model behaves with radio buttons. Since we can only select one radio button from a group, the variable which binds two ways gets the value of the radio button that is selected.

index.html (Snippet)

<div>
  <h4>Radio buttons</h4>
  <input type="radio" id="html" value="HTML" v-model="selected">
  <label for="html">HTML</label>
  <br>
  <input type="radio" id="css" value="CSS" v-model="selected">
  <label for="two">CSS</label>
  <br>
  <input type="radio" id="javascript" value="JavaScript" v-model="selected">
  <label for="JavaScript">JavaScript</label>
  <br>
  <span>Selected option: {{ selected }}</span>
</div>

index.js (snippet)

data: {
  selected: ''
}

The variable selected gets the value of HTML or CSS or JavaScript depending on which option is chosen.

Single select dropdown

This is a normal dropdown where you get to select one option.

index.html (Snippet)

<div>
  <h4>Single select dropdown</h4>
  <select v-model="singleSelect">
    <option disabled value="">Please select one</option>
    <option>Chocolate</option>
    <option>Ice cream</option>
    <option>Green Tea</option>
  </select>
  <span>I love: {{ singleSelect }}</span>
</div>

index.js (snippet)

data: {
  singleSelect: ''
}

The variable singleSelect is an empty string initially. Due to the magic of v-model, it gets the value of the option that is chosen from the dropdown.

Multi select dropdown

Here we can select more than one option from the dropdown and hence the initial value of the multiselect variable in the Vue instance’s data property is an empty array.

index.html (Snippet)

<div>
  <h4>Multiselect dropdown</h4>
  <select v-model="multiselect" multiple>
    <option value="Dance">Dance</option>
    <option value="Swim">Swim</option>
    <option value="Paint">Paint</option>
    <option value="Play tennis">Play tennis</option>
  </select>
  <br>
  <span>I know to: {{ multiselect }}</span>
</div>

index.js (snippet)

data: {
  multiselect: []
}

The array gets populated with all the values selected from the dropdown. (For multiple selections, press theCtrl key down and then select.)

Dropdown with dynamic options

In real time scenarios, the options for our dropdowns are not always known. Also, it is never a good practice to hard code values. So, in cases where we have to handle dynamic data, v-bind can be used along with v-model. Combining them gives you immense power! Let us also take advantage of the v-for directive to loop over all the options that we may have to handle.

index.html (Snippet)

<div>
  <h4>Handling dynamic options</h4>
  <select v-model="dynamicSelection">
    <option v-for="letter in alphabet" v-bind:value="letter.word">
      {{ letter.for }}
    </option>
  </select>
  <span>Selected letter: {{ dynamicSelection }}</span>
</div>

Index.js (snippet)

data: {	
  dynamicSelection: 'Apple',
  alphabet: [
    { word: 'Apple', for: 'A' },
    { word: 'Bat', for: 'B' },
    { word: 'Cat', for: 'C' }
  ]
}

Here, for each object in the alphabet array, ‘A’ ‘B’ and ‘C’ are listed in the dropdown and the word is bound to value attribute of the option tag. Depending on the value chosen, word is updated in the dynamicSelection variable. Note that the initial value is the first word in the alphabet array.

With that, let us take a look at the complete code we have so far.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
      <div>
        <h4>Single checkbox with a boolean value</h4>
        <!-- value bindings: single checkbox -->
        <input type="checkbox" id="single" v-model="chosen">
        <label for="single">{{ chosen }}</label>
      </div>
      <hr/>
      <div>
        <h4>Multiple checkboxes with values of an array</h4>
        <!-- value bindings: multiple checkboxes -->
        <input type="checkbox" id="cars" value="Cars" v-model="checkedFilms">
        <label for="cars">Cars</label>
        <input type="checkbox" id="brave" value="Brave" v-model="checkedFilms">
        <label for="brave">Brave</label>
        <input type="checkbox" id="up" value="Up" v-model="checkedFilms">
        <label for="up">Up</label>
        <input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms">
        <label for="ratatouille">Ratatouille</label>
        <br/>
        <span>Selected pixar films are: {{ checkedFilms }}</span>
      </div>
      <hr/>
      <div>
        <h4>Radio buttons</h4>
        <input type="radio" id="html" value="HTML" v-model="selected">
        <label for="html">HTML</label>
        <br>
        <input type="radio" id="css" value="CSS" v-model="selected">
        <label for="two">CSS</label>
        <br>
        <input type="radio" id="javascript" value="JavaScript" v-model="selected">
        <label for="JavaScript">JavaScript</label>
        <br>
        <span>Selected option: {{ selected }}</span>
      </div>
      <hr/>
      <div>
        <h4>Single select dropdown</h4>
        <select v-model="singleSelect">
          <option disabled value="">Please select one</option>
          <option>Chocolate</option>
          <option>Ice cream</option>
          <option>Green Tea</option>
        </select>
        <span>I love: {{ singleSelect }}</span>
      </div>
      <hr/>
      <div>
        <h4>Multiselect dropdown</h4>
        <select v-model="multiselect" multiple>
          <option value="Dance">Dance</option>
          <option value="Swim">Swim</option>
          <option value="Paint">Paint</option>
          <option value="Play tennis">Play tennis</option>
        </select>
        <br>
        <span>I know to: {{ multiselect }}</span>
      </div>
      <hr/>
      <div>
        <h4>Handling dynamic options</h4>
        <select v-model="dynamicSelection">
          <option v-for="letter in alphabet" v-bind:value="letter.word">
            {{ letter.for }}
          </option>
        </select>
        <span>Selected letter: {{ dynamicSelection }}</span>
      </div>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css"></link>
  </body>
</html>

index.js

new Vue({
  el: "#app",
  data: {
    chosen: false,
    checkedFilms: [],
    selected: '',
    singleSelect: '',
    multiselect: [],
    dynamicSelection: 'Apple',
    alphabet: [
      { word: 'Apple', for: 'A' },
      { word: 'Bat', for: 'B' },
      { word: 'Cat', for: 'C' }
    ]
  }
});

As always, the entire code is available in the GitHub repo for easy reference. Feel free to fork and code to your heart’s content.

It is high time you guys practice some of these form inputs in your own examples and give me a shout out in the comments section if you have any queries.

Have a nice day!

Starting code

Single checkbox

Multiple checkboxes

Radio buttons

Single select dropdown

Multi select dropdown

Dropdown with dynamic options

Next Post

Leave A Comment Cancel reply