Enlace de datos doble o bidireccional

Author
By Darío Rivera
Posted on 2020-06-15 in Vue.js

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.

See the Pen Two-way data binding on checkbox input (multiple values) by Darío Rivera (@fermius) on CodePen.


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.

See the Pen Two-way data binding on select by Darío Rivera (@fermius) on CodePen.


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!.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.