Vue.js Form Input Bindings: v-model for Two-Way Data Binding

Vue provides us with a v-model directive, this is used to create two-way data bindings on form inputs, textarea and also select fields. This directive automatically picks the correct way of updating the element based on the input type. Though this is a little bit magical, v-model is a syntax sugar for updating data on user input events, it also provides special care for some edge cases.

v-model uses different properties internally and emits different events for different types of input elements:

• text and textarea uses the value property and input event;
• checkboxes and radiobuttons uses the checked property and change event;
• select fields use the value as a prop and the change as an event.

Text

<input v-model="information" placeholder="edit me">
<p>Message is: {{ information }}</p>

Multiline text

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

Checkbox

A Single checkbox, boolean value:

<input type="checkbox" id="checkedbox" v-model="checked">
<div for="checkbox">{{ checked }}</div>

Multiple checkboxes that are bound to the same Array:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

Select

<select v-model="selected">
  <option disabled value="">Select One </option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

Multiple select (bound to Array):

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

Dynamic options rendering with v-for:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Value Bindings

V-model binding values are usually static string for radio, select options and checkbox.

<!-- `picked` is a string "b" when checked -->
<input type="radio" v-model="picked" value="b">
<!-- `toggle` is either false or true-->
<input type="checkbox" v-model="toggle">
<!-- `selected` is a string "xyz" when the first option is selected -->
<select v-model="selected">
  <option value="xyz">XYZ</option>
</select>

To achieve dynamic binding we have to use v-bind directive.

Checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

The false-value and true-value attributes don't affect the input's value attribute. This is because browsers don't include unchecked boxes in form submissions. To guarantee that one of two values is submitted with a form (e.g. "yes" or "no"), please use radio inputs instead.

Select Options

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 456 }">456</option>
</select>

Modifiers

.lazy

v-model syncs the input with the data after each input event by default. You can always add the lazy modifier to instead sync after change events:

<input v-model.lazy="msg" >

.number

If you want user input to be typecast as a number automatically, you can add the number modifier to v-model managed inputs:

.trim

To trim the whitespace from user input automatically, you can use the .trim modifier on your v-model managed -managed.

v-model with Components

We can use components to build reusable inputs, and we can equally make these to work with v-model as it is supported.

Previous: Vue.js Components Basics: Reusability and Data Flow.
Next: Props in Vue.js: Types, Validation, and Best Practices.