La gestión de los eventos es una funcionalidad requerida con frecuencia cuando desarrollamos páginas web. En este artículo se habla sobre cómo se puede realizar la gestión de eventos en Vue.Js 2 y algunas funcionalidades avanzadas asociadas a este aspecto.
Código
El código que se muestra a continuación funciona de la siguiente forma. Cuando el usuario pulsa sobre el botón que aparece en pantalla, hay un evento asociado al click del botón, que llama a una función y muestra un mensaje a través de un alert generado por el navegador.
En la pestaña de HTML, en el tag que compone el botón se la ha añadido el código v-on:click=»say(‘Hello’)». Mediante la funcionalidad v-on:click, se está asociando al evento click que se realice la acción que hay dentro de las comillas, en este caso se llama a un método (say) con una cadena de texto («Hello») como parámetro.
En la parte Javascript solo ha sido necesario crear un método que recibe como parámetro una cadena de texto y la muestra a través de un alert.
Funcionalidades avanzadas
A parte de gestionar un simple evento como puede ser un click, hay algunas funcionalidades interesantes que se pueden utilizar en contextos con una mayor complejidad.
A continuación se enumeran las funcionalidades principales, sin embargo no está de más revisar la documentación oficial,ya que podrían haber ampliado con alguna funcionalidad nueva.
Modificadores
Es muy común llamar a la funcionalidad event.preventDefault() o event.stopPropagation() dentro de la lógica asociada al evento. De esta forma Vue.Js proporciona modificadores en los eventos simples, los cuales se utilizan de la siguiente forma:
<a v-on:click.stop="doThis"></a>Como se puede observar, solo con añadir detrás del evento click un .stop, se va a realizar la funcionalidad event.stopPropagation() y por lo tanto no vas a tener la necesidad de ejecutar esta línea de código dentro del código asociado al evento.
El listado de modificadores disponibles actualmente es el siguiente:
.stop.prevent.capture.self.once.passive
Key modificadores
Por otra parte, también es bastante común capturar eventos de teclado, como keyup, keydown, etc. En este aspecto Vue.Js también proporciona atajos para poder centrarte al cien por cien en el desarrollo de tu código, sin necesidad de preocuparte en hacer comparaciones sobre el evento que se ha generado.
A continuación se muestra un ejemplo sobre capturar un evento de teclado e incluso llegar a especificar el código de la tecla que está involucrada en tal evento.
<input @keyup.enter="submit">
<input @keyup.13="submit">No se ha comentado anteriormente, pero en lugar de utilizar v-on: para capturar un evento, también se puede utilizar en su lugar @ y es exactamente lo mismo, no cambia en ningún sentido.
El listado de modificadores disponibles actualmente es el siguiente:
.enter.tab.delete.esc.space.up.down.left.right
Conclusión
La gestión de eventos en Vue.Js es bastante sencilla y muy intuitiva. Desde crear una funcionalidad simple hasta cuando quieres realizar acciones más complejas, como asociar el evento capturado un event.stopPropagation(). Y como se ha podido observar, todo esto se consigue con una sintaxis muy simple y limpia. Esto hará que nuestro código sea mucho más fácil de leer y depurar.
