Multiple v-model Bindings in Vue 3

Razet · · 7190 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
    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

0

Please login or create new account to add your comment.

0 comments
You may also like:

What is JavaScript Promise? Understanding and Implementing Promises in JS

JavaScript, the language of the web, has evolved tremendously over the years, and with it, the methods for handling asynchronous operations have improved. One such advancement (...)
Harish Kumar

JavaScript Array Destructuring: Unpacking Arrays with Ease

JavaScript array destructuring is a powerful feature introduced in ES6 (ECMAScript 2015) that simplifies the process of extracting values from arrays. It allows you to unpack an (...)
Harish Kumar

Arrow Functions: The Modern Way to Write JavaScript

JavaScript Arrow Functions, introduced in ES6 (ECMAScript 2015), have become a fundamental part of modern JavaScript development. They offer a concise and elegant way to write (...)
Harish Kumar

Essential JavaScript Tips for Better Coding - A Guide to JavaScript Best Practices

In the ever-evolving landscape of web development, the significance of JavaScript cannot be overstated. As the backbone of interactive websites, mastering JavaScript is essential (...)
Harish Kumar

From Beginner to Pro: Master JavaScript with This Comprehensive Guide (ES2015-ES2023)

Calling all aspiring and seasoned developers! I'm ecstatic to announce the release of my comprehensive eBook, "JavaScript: A Comprehensive Guide from ES2015 to ES2023". This in-depth (...)
Harish Kumar

Best Practices for Testing and Quality Assurance in Custom Web App Development

In the fast-paced world of web app development, delivering high-quality products that meet customer expectations is crucial. But how can you ensure your custom web application (...)
VisionX Technologies