The v-model
directive in Vue is a powerful feature that allows us to create a two-way binding between a form input element and a Vue data property. This means that when the user changes the content of the input field, it automatically updates the corresponding data property and vice versa.
Example Usage
Let’s take a look at how to use v-model
in a few different scenarios:
1. Text Input
<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
In this example, the value of the message
data property is bound to the value of the input field. Any changes made by the user will update the message
property, and the updated value will be displayed in the paragraph below the input field.
2. Select Input
<select v-model="selected">
<option disabled value="">Choose a fruit</option>
<option>Apple</option>
<option>Banana</option>
<option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>
In this case, the selected option in the dropdown menu is bound to the selected
data property. When the user selects a different option, the selected
property is automatically updated, and the chosen fruit is displayed next to the dropdown.
Directive Modifiers
Vue provides some handy directive modifiers that can be used with v-model
to customize its behavior.
1. .lazy
To update the model only when the change event occurs, rather than on every keystroke, you can use the .lazy
modifier:
<input v-model.lazy="message" placeholder="Enter a message">
2. .trim
If you want to automatically trim any whitespace from the input field, you can use the .trim
modifier:
<input v-model.trim="message" placeholder="Enter a message">
3. .number
If you expect the input to be a number instead of a string, you can use the .number
modifier:
<input v-model.number="quantity" type="number">
Working with Nested Properties
In some cases, you may have nested properties within your data object. Let’s say you have a shopping cart component that has a form to add a product:
<template>
<div>
<h1>Add Product</h1>
<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>
<button @click="addProduct">Add</button>
</div>
</template>
To update the nested properties of the product
object, you can use dot notation with v-model
:
<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>
Now, whenever the user changes the name or description, the corresponding properties in the product
object will be updated.
With these tips, you can effectively use the v-model
directive in Vue to create dynamic and interactive forms. Make sure to explore more about Vue directives and their capabilities to unleash the full potential of your Vue applications.