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.

“`html

“`

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.