Michael Thiessen

Multiple v-models

Invalid Date

TK defineModel is now the recommended approach https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings

In Vue 3 we're not limited to a single v-model:

<AddressForm

  v-model:street-name="streetName"

  v-model:street-number="streetNumber"

  v-model:postal-code="postalCode"

  v-model:province="province"

  v-model:country="country"

/>

This makes dealing with complex forms a lot easier!

First, we need to create the props and events for v-model to hook into (I've omitted a couple v-models for simplicity):

<!-- AddressForm.vue -->

<script setup>

// Set up all the props

defineProps({

  streetName: {

    type: String,

    required: true,

  },

  streetNumber: {

    type: Number,

    required: true,

  },

  // ...

  country: {

    type: String,

    required: true,

  },

});



// Set up our events

defineEmits([

  'update:streetName',

  'update:streetNumber',

  // ...

  'update:country',

]);

</script>

Then, inside the component we use the prop to read the value, and emit update:<propname> to update it:

<template>

  <form>

    <input

      type="text"

      :value="streetName"

      @input="$emit('update:streetName', $event.target.value)"

    >

    <input

      type="text"

      :value="streetNumber"

      @input="$emit('update:streetNumber', $event.target.value)"

    >

    <!-- ... -->

    <input

      type="text"

      :value="country"

      @input="$emit('update:country', $event.target.value)"

    >

  </form>

</template>

You can read more about using multiple v-models here.

Related Articles