w3resource

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.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/vue/form-input-bindings.php