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 🔥
¿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.