Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Use Multiple v-model Bindings

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Nov 25, 2021
1 min read
|
118 views
v-model
Vue Tip: Use Multiple v-model Bindings Image

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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.