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.