Multiple v-model Bindings in Vue 3

Razet · · 1425 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:

Vuex Tutorial: Learn State management in Vue.js using Vuex

The objective of this Vuex tutorial is to give you an essential understanding of state management in Vue.js using Vuex by creating a relatable example. By the end of this tutorial, (...)
Harish Kumar

How To Install NVM (Node Version Manager) on Ubuntu System?

This tutorial will assist you with installing NVM on the Ubuntu machine. Additionally, allow you to install different node versions and other useful examples.
Harish Kumar

How to Upload Multiple Images with jQuery AJAX and PHP, with preview

Uploading an image without page refresh is more user-friendly than refreshing the entire page. So, in this guide, you will learn how to upload multiple images using ajax in jQuery (...)
Nakul Kumar

Create SPA authentication Using Laravel Sanctum and Vue.js

In this guide, we will focus on SPA authentication in a simple Vue.js app using Laravel Sanctum. Laravel Sanctum provides a featherweight authentication system for SPAs (single (...)
Harish Kumar

What is Teleport Component in Vue.js 3?

Vue 3 provides the <teleport> component. Here in this post, I will show you how to use the <teleport> component in your Vue.js 3 project.
Razet

What is the difference Between watch and watchEffect in Vue.js 3?

There are a few cases where we may need to track a reactive property, and we can do this by utilizing a Vue watcher.
Harish Kumar