·
1 min read

Vue Tip: Use Multiple v-model Bindings

MH

Michael Hoffmann

@mokkapps

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

I will never share any of your personal data. You can unsubscribe at any time.