Manejo de eventos en Vue.js 2

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.

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:

<button class="btn btn-primary" v-on:click="createTask">Crear tarea</button>

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

...
methods: {
    createTask: function () {
        //...
    }
}

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:

...
createTask: function () {
    this.tasks.push({
        title: this.new_task, 
        pending: true
    });
}

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:

<!-- El evento click solo podrá ser activado una sola vez -->
<button class="btn btn-primary" v-on:click.once="createTask">Crear tarea</button>

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

<input type="text"
       v-model="task"
       class="form-control"
       v-on:keyup.13="createTask">

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:

<input type="text"
       ...
       v-on:keyup.enter="createTask">

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:

// Habilitamos un modificador personalizado para la tecla f1
Vue.config.keyCodes.f1 = 112

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.

<!-- Alt + C -->
<input type="text"
       ...
       @keyup.alt.67="createTask">

<!-- Ctrl + Click -->
<button class="btn btn-primary" @click.ctrl="createTask">Crear tarea</button>

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:

<form v-on:submit="createTask">
    ...
</form>

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:

<form @submit="createTask">
    ...
</form>

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.

...
createTask: function(event) {
    event.preventDefault(); // Evitamos el comportamiento por defecto del formulario
    ...
}

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.

<form @submit.prevent="createTask">
    ...
</form>

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

<!-- Pasamos argumentos a createTask -->
<button class="btn btn-primary" @click="createTask(true)">
    Crear tarea pendiente
</button>

// Recibimos nuestro argumento y definimos el estado de la tarea dependiendo del valor de este
createTask: function (pending) {
    this.tasks.push({
        title: this.new_task, 
        pending: pending
    });
    ...
}

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.

...
<button class="btn btn-primary" @click="createTask(true, $event)">
    Crear tarea pendiente
</button>

// Recibimos el evento como segundo argumento
createTask: function (pending, event) {
    event.preventDefault();
    ...
}

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 nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy