Multiple v-model Bindings in Vue 3

Razet · · 6840 Views

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="$emit(update:modelValue, $"

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="$emit(update:fullName, $"

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:


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


Please login or create new account to add your comment.

You may also like:

Best Card Games to Play with Chips

Are you interested to know about card games that are played with Chips or Token? If yes, you should read this article to know the different types of card games that are played (...)

The Ultimate Guide to Mobile Game Development in 2023

Did you know that a game is a composition of all the modern aspects that are important for humans in today's world. It includes programming, art design, music, writing, and much (...)
Kenny William

How 2D Game Development Company is Helpful To Develop Excellent Mobile Games in 2023?

A reliable 2D game development company can be very helpful in developing outstanding mobile games because of their specialized expertise and experience in the domain. Here are (...)
Kenny William

Learn PHP Development from beginning.

PHP stance Hypertext Preprocessor, it's server-side scripting laungage and easy to use. PHP  also well  known for its speed, simplicity, flexibility features that have made it (...)
Programmer Desk

Types of Instacart Clone Apps To Power Your Next Grocery Business

The Instacart app has been widely successful in delivering products on time. Not only are the items delivered safely, but they are also picked up by a specially assigned shopper. (...)
Narola Infotech