·
1 min read
Vue Tip: Use Multiple v-model Bindings
MH
Michael Hoffmann
@mokkapps
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 BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :