El nuevo v-model en Vue 3

Fecha de publicación: julio 28, 2020

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

En Vue 3 tenemos una gran novedad para poder hacer data-binding. Si no sabes qué es data-binding, es muy sencillo: es la posibilidad de que cuando un input cambie desde nuestro formulario p.ej también lo haga en nuestro componente.

En  Vue 2 para hacer data-binding utilizamos v-model, y esto también es así en Vue 3, es decir, lo siguiente funcionará en ambos casos:

La novedad en Vue 3 es la posibilidad de atacar una prop de un componente a través de v-model para que cuando su valor cambie podamos capturarlo desde el componente que lo utiliza.

v-model en Vue 3

Para que lo entiedas perfectamente vamos a crear un componente que representará un formulario de inicio de sesión con Vue 3.

Hasta aquí todo bien, simplemente tenemos un formulario para iniciar sesión con 3 campos. Ahora bien, algo que sí puede llamar la atención es ver cómo en los eventos change o input estamos emitiendo eventos, eventos que comienzan por update: seguido del nombre del modelo de datos… ¿y para qué? Para lo siguiente:

Cada vez que cualquier dato cambie en nuestro componente LoginForm nosotros tendremos ese dato actualizado en el componente que lo utilice gracias a la posibilidad de utilizar múltiples directivas v-model en Vue 3, una para cada prop.

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login