Multiple v-model Bindings in Vue 3

In this guide, I will explain the new v-model in Vue 3 and go through a new feature that permits you to utilize various v-model on the same component!

The v-model directive permits us to bind an input value to the state of an application. We use it to make a two-way data binding on the form input, textarea, and select elements.

The core idea of the v-model remaining the same as before in Vue 3 with more enhancements and features. Let’s dig in!

`v-model` in Vue 2

Vue 2 supports a single v-model for any Component. In Vue 2, to build a complex Component that upholds two-way data binding, it uses a single v-model.

The Component handles the state internally for all the input elements. It produces a single payload object speaking to the state of the Component. Finally, it emits an event to the parent Component with the payload data.

This strategy had a few pitfalls, particularly for making Vue UI Libraries. It's unclear what's being included for the payload. A developer needed to loop through the payload object to reveal what properties were there.

`v-model` in Vue 3

In Vue 3, the v-model directive has had a redesign to give developers more power and flexibility when building custom components that help two-way data binding.

The v-model directive now supports new defaults.

The default v-model property is renamed to modelValue rather than the old name of the value.

The default v-model event is renamed to update:modelValue rather than the old name of the input.

You may be thinking that is additionally typing when utilizing the new v-model directive. The Vue team is one step ahead and has given you a shorthand to use instead. Let’s rebuild the custom component using it.

<!-- Other elements in the Component -->
<input
    type="text"
    :value="modelValue"
    @input="$emit(update:modelValue, $event.target.value)"
>

The custom component defines a single prop named modelValue as follows:

props: {
        modelValue: {
            type: String,
            default: '',
            required: true
        }
}

At that point, in the parent component, utilize the new custom component as follows:

<CustomComponent v-model:modelValue="name" />

The new v-model directive offers the new shorthand that is used like this:

<CustomComponent v-model="name" />

The v-model directive expects that the CustomComponent defines an internal property named modelValue and emits a single event named update:ModelValue. 

If you would prefer not to utilize the default naming convention, don't hesitate to utilize another name. Make sure to be consistent when naming properties. Here's an illustration of utilizing a custom name for the modelValue property.

<!-- Other elements in the Component -->
<input
    type="text"
    :value="fullName"
    @input="$emit(update:fullName, $event.target.value)"
>

The custom component above defines a single prop named modelValue as follows:

props: {
        fullName: {
            type: String,
            default: '',
            required: true
        }
}

At that point, in the parent component, you utilize the new custom component like so:

<CustomComponent v-model:fullName="fullName" />

Notice the utilization of the property fullName rather than the default property name.

Vue 3: Multiple v-model directive bindings

With this, the v-model gives the adaptability to utilize multiple v-model directives on a single component. The modelValue can be renamed to anything you desire.

In this video, Multiple v-model directive is explained in detail:

Conclusion

Vue 3 has many new features and enhancements. Today, we saw how we utilize multiple v-model directives on a single component instance. There is a lot more to learn and uncover in Vue 3.

1. Vue.js 3.0 Breaking Changes, and Upgrade from Vue 2 to Vue 3

2. Learn Vue 3 Composition API with simple Todos example
   

3. Ref vs Reactive - Vue 3 Composition API
   

4. watchEffect vs watch - Vue 3 Composition API 
   

5. Vue 3 Teleport with example 
   

6. Vue 3 Suspense and Lazy Load Components