Mastering Two-Way Data Binding with v-model in Vue 3

Unlocking the Power of v-model in Vue 3

The v-model directive is a fundamental feature in Vue.js that enables two-way data binding on form input elements. In Vue 3, the v-model directive has been revamped to provide more flexibility and power when building custom components. In this article, we’ll explore the changes to the v-model directive in Vue 3, its usage, and how to use multiple v-model bindings to simplify complex form creation.

What is the v-model Directive?

The v-model directive is used to create a two-way data binding between a form input element and a component’s state. It handles data updates in two ways:

• When the value of the input changes, the v-model reflects the value onto the state inside the component.
• When the state of the component changes, the v-model reflects the changes onto the form input elements.

How Does v-model Handle Data Binding?

The v-model directive uses distinct properties and emits different events for different input elements by default:

• value property and input event for text and textarea elements
• checked property and change event for checkboxes and radio buttons
• value as a prop and change event for select fields

Modifiers for v-model

The v-model directive has three modifiers that can be used for data binding:

• .lazy: allows the sync to occur after each change event
• .number: automatically converts a user entry to a number
• .trim: automatically trims whitespace from the user input

Changes to v-model in Vue 3

In Vue 2, the v-model directive was limited to a single instance per component. However, in Vue 3, you can have multiple v-model directives on a single component instance. This provides more flexibility when building custom components.

Using Multiple v-model Bindings

To demonstrate the power of multiple v-model bindings, let’s create a checkout form that lists the user’s first name, last name, and email address, followed by some fields related to billing and delivery.

Creating the Reusable Component

We’ll create a reusable address component for the form. This component will be bound to a custom component in the App.vue file using the v-model.

Creating the CheckoutForm

We’ll create the Checkout Form inside our App.vue file and import the AddressFieldGroup.vue into the App.vue file.

<div>
<h1>Checkout Form</h1>
<form><label for="firstName">First Name:</label>
<input id="firstName" type="text" />

<label for="lastName">Last Name:</label>
<input id="lastName" type="text" />

<label for="email">Email:</label>
<input id="email" type="email" />

</form></div>
 

<script>
import { reactive } from 'vue';
import AddressFieldGroup from './AddressFieldGroup.vue';

export default {
  components: { AddressFieldGroup },
  setup() {
    const form = reactive({
      firstName: '',
      lastName: '',
      email: '',
      billingAddress: {},
      deliveryAddress: {},
    });

    return { form };
  },
};
</script>

In this example, we’ve used multiple v-model bindings to simplify the creation of a complex form. We’ve also demonstrated how to use the v-model directive with custom components.