Vue.js nos permite hacer uso de la directiva v-on para ejecutar expresiones y métodos al momento en que disparen ciertos eventos en el DOM. En la lección de hoy aprenderemos a hacer uso de esta directiva para manejar los eventos de nuestra página.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Notas

Asociamos nuestros elementos HTML a un evento con el uso de la directiva v-on seguida de dos puntos y el evento que esperamos, además del método a ejecutar. En nuestro ejemplo es el evento click el que esperamos que suceda y createTask el nombre del método:

El método createTask debemos declararlo en nuestra instancia de Vue, especificamente dentro del objeto methods.

Dentro de methods, el objeto que almacena nuestros métodos, creamos la propiedad createTask y le asignamos una función. Esta función contiene la lógica para agregar una nueva tarea:

Usamos la palabra especial this para hacer referencia a propiedades de nuestro objeto VM, debido a que nos encontramos dentro de él.

Haciendo uso del modificador .once en el evento click podemos hacer que un evento pueda ser activado una sola vez:

También, podemos asociar eventos a campos de texto, por ejemplo, si quisiéramos añadir una nueva tarea al presionar Enter.

Vue.js nos provee de diferentes alias para las teclas más usadas, entre ellas .enter para Enter, .tab para Tab, .esc para escape, entre otras, puedes ver una lista completa en la documentación. Podemos cambiar nuestro código para hacer uso del modificador .enter en lugar de .13:

También podemos asignar modificadores personalizados mediante el objeto config.keyCodes. Por ejemplo, si en nuestro código queremos hacer uso de .f1, podemos asignar esta tecla, o cualquier otra, de la siguiente forma:

Podemos usar modificadores para activar un evento solo cuando una determinada tecla ha sido presionada, por ejemplo Alt + c o Ctrl + Click. Podemos usar: .ctrl, .alt, .shift y .meta.

Es importante pasar el modificador, ya sea .enter u otro, para especificarle a Vue que queremos que el evento se ejecute al presionar y soltar determinada tecla. De no asignar un modificador y dejar solo v-on:keyup nuestro evento se ejecutara cada vez que cualquier tecla sea presionada.

También podemos asociar un evento a un formulario. En nuestro ejemplo el método createTask será ejecutado cuando el usuario envíe el formulario:

Al igual que la directiva v-bind, v-on también posee un alias. En lugar de usar v-on podemos usar una arroba @ seguido del evento que esperamos:

Al usar la directiva v-on con submit debemos evitar que el formulario trate de enviar una petición y recargue nuestra página. Para ello, en nuestro método createTask, debemos prevenir el comportamiento por defecto del formulario, recibiendo nuestro evento como argumento y luego ejecutando el metodo preventDefault() de este.

Vue.js nos da una forma más corta de evitar este comportamiento, utilizando el modificador .prevent en nuestra directiva submit. Esto hará que no sea necesario llamar a event.preventDefault() desde nuestro método createTask.

Cuando llamamos a un método podemos especificar o no argumentos. Estos argumentos luego pueden ser usados en nuestro método:

Para prevenir el comportamiento por defecto en @click podemos usar el modificador .prevent. Pero si quieres hacer esto directamente en el método createTask debemos pasar nuestro evento como argumento usando la variable especial $event, debido a que ya estamos especificando un primer argumento.

Ejercicio

Permitir que los usuarios haciendo click en una tarea puedan marcarla como completada o no. Si el usuario hace click en una tarea, la tarea debería cambiar de estado pendiente a no pendiente y si la tarea ya fue completada debería aparecer tachada. En este caso debes lograr esto utilizando una clase dinámica como aprendimos en la lección anterior.

Regístrate hoy a Styde para obtener feedback sobre éste y otros ejercicios:

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Material relacionado

Lección anterior Listado de elementos con v-for en Vue 2 Lección siguiente Uso de filtros en interpolaciones de texto en Vue.js 2