Multiple v-model Bindings in Vue 3

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

Mastering the `array.map` Method in JavaScript

The array.map method in JavaScript is a powerful and versatile function used to create a new array by applying a specified function to each element of the original array. It’s (...)
Harish Kumar

JavaScript Async/Await: Writing Clean and Efficient Asynchronous Code

JavaScript is a single-threaded programming language. Thus, it means that it can execute one command at a time. How can this be possible? Well, the answer lies in the fact that (...)
Harish Kumar

React Components Explained: Function vs Class Components

React, a popular JavaScript library for building user interfaces, revolves around components. Components are the building blocks of a React application, encapsulating logic and (...)
Harish Kumar

Understanding JavaScript Promises: Advanced Techniques and Best Practices

JavaScript Promises are a powerful tool for managing asynchronous operations in JavaScript, offering a more readable and maintainable approach than traditional callback methods. (...)
Harish Kumar

JSX in React: A Comprehensive Guide

JavaScript XML (JSX) is a syntax extension for JavaScript, commonly used with React to describe what the user interface should look like. Introduced by Facebook, JSX makes it easier (...)
Harish Kumar

How to Create a React.js App Using Vite: A Step-by-Step Guide

Creating a React.js application traditionally involves using Create React App (CRA), but recently, Vite has emerged as a powerful alternative. Vite offers faster builds, hot module (...)
Harish Kumar