Múltiple v-model con Vue 3

A diferencia de Vue 2, en Vue 3 podemos usar más de una directiva v-model. Cada v-model se sincroniza con una propiedad diferente, simplificando el proceso de comunicación reactiva entre componentes:

<AppForm
  v-model:name="name"
  v-model:surname="surname"
  v-model:profession="profession"
/>

v-model Vue 3 Composition API

La clave para utilizar varios v-model con Vue 3 es especificar un modificador/argumento al escribir la directiva, como por ejemplo v-model:<argument>. Cada uno de los argumentos de apuntar a una propiedad reactiva que vive en el componente padre y queremos pasar a un sub-componente.

Desde el componente hijo debemos declarar las propiedades con el helper defineProps:

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  surname: {
		...
  },
  profession: {
		...
  },
})

Y definir los eventos con la nomenclatura update:<prop> y defineEmits:

const emit = defineEmits([
  'update:name',
  'update:surname',
  'update:profession',
	]);

Ahora, podemos usar con tranquilidad las nuevas propiedades provenientes de v-model dentro la estructura del componente:

<template>
  <article>
    <div>
      <label for="name">Name</label>
      <input
        :value="name"
        @input="$emit('update:name', $event.target.value)"
        type="text"
        id="name"
      />
    </div>
    ...
  </article>
</template>

Puedes incluso crear un método local que simplifique el proceso de actualización:

const updateProp = (prop, { target: { value } }) =>
  emit(`update:${prop}`, value);

v-model Vue 3 component

Como puedes comprobar, el poder emplear varios v-model con Vue 3 es realmente sencillo. De todas formas te dejo el enlace a una demo con todo el código y a la documentación oficial de Vue 3.

Happy coding 🔥