Vue Tip: Use Multiple v-model Bindings

The v-model gives the flexibility to use multiple v-model directives on a single component instance.

It is possible to rename modelValue to whatever we want, and therefore we can use multiple v-model directives.

Let's take a look at an exemplary App.vue component that uses HelloWorld component, which provides two v-model directives:

App.vue

<template> <HelloWorld v-model:firstName="firstName" v-model:lastName="lastName" /> </template> <script setup lang="ts"> import HelloWorld from './components/HelloWorld.vue' interface Props { firstName: string lastName: string } const props = withDefaults(defineProps<Props>(), { firstName: 'Michael', lastName: 'Hoffmann', }) </script>

And here is the code for HelloWorld.vue:

HelloWorld.vue

<template> <div class="container"> <label>First Name:</label> <input :value="firstName" /> <label>Last Name:</label> <input :value="lastName" /> </div> </template> <script setup> const props = defineProps({ firstName: String, lastName: String, }) const emit = defineEmits(['update:firstName', 'update:lastName']) </script>

The source code for this demo is available at StackBlitz:

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once

The v-once directive is a Vue.js directive used to avoid unwanted re-renders of an element.

Vue Tip: Trigger Watcher Immediately

The watch hook provides an option that the callback is called immediately.