03.md

🔁 📅 Two-Way Data Binding y Eventos

Hasta ahora vimos como vincular data entre el código y la vista usando directivas y expresiones. Cuando cambiamos código, la vista refresca esos cambios de forma automática en nuestro HTML. Esto sucede gracias a que como mencionamos antes, Vue es un framework reactivo y se encarga de resolver esta cuestión automáticamente.

Por suerte este concepto de reactividad funciona de forma bi-direccional, es decir que Vue también va actualizar nuestro código cuando algo se modifica en la vista. Esto generalmente sucede cuando el usuario interactúa con nuestra aplicación, ingresando data en formularios, haciendo click en botones, etc.

v-model

Lo primero que vamos a ver es la directiva v-model la cual nos permite vincular elementos HTML de tipo input, select y textarea con propiedades de nuestro vm. De esta forma cada vez que el usuario modifique el valor de estos elementos, Vue va a actualizar el valor en las propiedades enlazadas.

1. Creamos una nueva aplicación (recuerden incluir el script con referencia al framework), agregamos un elemento input dentro del HTML y le agregamos la directiva v-model con referencia a una propiedad llamada name. También vamos a agregar una expression para mostrar el valor de {{ name }} a medida que el usuario va ingresando la información.

<div id="app">
  <input type="text" v-model="name">
  <p>
    {{ name }}
  </p>
</div>

2. Vamos entonces a crear dentro del objeto de la función data, una propiedad llamada name.

const vm = {
  el: '#app',
  data() {
    return {
    	name: ''
    }
  }
}

const app = new Vue(vm)

Una vez hecho esto, podemos corroborar el funcionamiento escribiendo dentro del input en nuestra vista. Vamos a ver que el texto se actualiza de forma instantánea.

Lo que hicimos fue enlazar el input con una propiedad del vm. De ahora en mas cada vez que el usuario modifique el valor del input, nuestra variable va a cambiar y si nosotros modificamos el valor por código también se cambiará en la vista. Podemos probarlo definiendo la propiedad name con un valor default:

const vm = {
  el: '#app',
  data() {
    return {
      name: 'Ignacio Anaya'
    }
  }
}

const app = new Vue(vm)

v-on

Como decíamos antes, el usuario también interactúa con nuestra aplicación a través de eventos. Como ya sabemos JS y el DOM están orientados a eventos. Esto nos permite a nosotros definir (usando funciones) como reaccionar y que hacer cada vez que estos eventos determinados ocurren.

Cuando usamos Vue, estas reacciones las definimos dentro de nuestro vm. Para definir propiedades lo hacemos usando la función data. En el caso de los eventos utilizamos el objeto methods.

Vamos a crear un evento que nos permita transformar la variable name cada vez que el usuario haga click a un botón.

1. Dentro de nuestro vm, creamos el objeto methods y le definimos una función con el nombre formatName.

const vm = {
  el: '#app',
  data() {
    return {
      name: 'Ignacio Anaya'
    }
  },

  methods: {
    formatName() {
      this.name = this.name.split(' ').join('-').toLowerCase()
    }
  }
}

const app = new Vue(vm)

El compartimiento de nuestra función formatName es sencillo. Combinamos los métodos split y join (de Array y String) para reemplazar los espacios por guiones y luego convertir todo a minúsculas. Lo importante es identificar que en los métodos accedemos a la propiedades del vm (e incluso a otros métodos) usando la variable this. Podemos decir que this es una representación interna del mismo vm.

2. Agregamos el botón al cual vamos a enlazar con el método formatName. Este enlace lo vamos a conseguir usando la directiva v-on.

<div id="app">
  <input type="text" v-model="name">
  <button v-on:click="formatName">Format</button>
  <p>
    {{ name }}
  </p>
</div>

Como podemos ver, la manera de utilizar la directiva es v-on:[nombre del evento] (similar al uso de v-bind). Esta directiva es muy flexible y nos permite establecer acciones para cualquier tipo de eventos (focus, keyup, blur, load, etc).

La directiva v-on (al igual que v-bind), también tiene un shortcut, podemos simplificar usando @: @click="formatName".

---

📝 Solución

⏪ ⏩