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.
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
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics