Enlace de datos doble o bidireccional (v-model)
En nuestro anterior post vimos el enlace de atributos en Vue.js, el cual básicamente permite enlazar atributos de elementos HTML con una propiedad en Vue. Esto significa, que los datos son pasados desde la instancia de Vue hacia el HTML. El día de hoy, veremos cómo realizar un enlace doble de datos, el cuál nos permitirá actualizar propiedades desde el HTML hacia Vue y viceversa.
Lo primero que hay que notar, es que este tipo de enlace funciona en los elementos de formulario input, textarea y select. Antes de entrar en detalle en cada uno de ellos veamos la directiva que hace posible el enlace bidireccional.
v-model="property"
La directiva v-model permite realizar un enlace doble de datos. La sintaxis es intuitita por si misma, simplemente basta asignar la propiedad del modelo a la directiva.
Input
Supongamos que tenemos el siguiente JavaScript con la instancia de Vue.
var app = new Vue({
el: '#app',
data: {
firstName: 'Steve'
}
});Entonces podemos realizar un enlace doble de datos con la propiedad firstName así:
<div id="app">
<input type="text" v-model="firstName" />
<p>
Your first name is {{ '\{\{ firstName \}\}' }}
</p>
</div>Siempre que cambie el valor de la propiedad en la instancia de Vue se actualizará el valor del input. De manera análoga, cada vez que cambie el valor del input, se actualizará el valor de la propiedad en la instancia de Vue.
Una de las cosas interesantes de los enlaces de Vue, es que nos permite enlazar los valores con respecto a una propiedad. Sí, eso ya lo hemos dicho antes pero tal vez no hayas visto algunas de las posibilidades que esto conlleva. Cuando realizas una selección de elementos mutuamente excluyentes utilizamos un input de tipo radio. Para indicar que se trata del mismo contexto se coloca el valor del mismo atributo name para todos. En Vue, no hace falta realizar esto ya que con la directiva se obtiene el mismo efecto.
El siguiente ejemplo muestra una selección múltiple en donde un usuario debe escoger cero o más intereses.
La mejor forma de entender esto, es que Vue al iniciar el renderizado del HTML verifica por cada elemento si su valor respectivo está en el array de feeds. Si el valor está entonces lo chequea. Cuando el usuario chequea cualquiera de los elementos el valor se actualiza en el modelo.
El siguiente ejemplo muestra un input de tipo checkbox sin el atributo value inicial.
Textarea
Supongamos que tenemos el siguiente JavaScript con la instancia de Vue.
var app = new Vue({
el: "#app",
data: {
content: "Hello\nWorld"
}
});
Entonces podemos realizar un enlace doble de datos con la propiedad content así:
<div id="app">
<textarea v-model="content"></textarea>
<pre>{{ '\{\{ content \}\}' }}</pre>
</div>
Siempre que cambie el valor de la propiedad en la instancia de Vue se actualizará el valor del textarea. De manera análoga, cada vez que cambie el texto en el textarea, se actualizará el valor de la propiedad en la instancia de Vue.
Select
En el caso de los elementos select la directiva debe colocarse como atributo en dicho elemento y no en los ítems que pudiese tener. Veamos el siguiente ejemplo.
Después de todo esto tienes las bases necesarias para utilizar el enlace doble de datos en tu código. Te invito a que realices un ejemplo con un elemento de tipo select múltiple para probar lo aprendido. Hasta pronto!.