Múltiple v-model con Vue 3

Inicial Vue Curso Vue en Escuela Vue

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 🔥

Código asociado
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre Múltiple v-model con Vue 3?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬