Frecuentemente te vas a encontrar en cualquier proyecto de frontend que necesitas escuchar el evento de click cuando el usuario pulsa un botón o sobre un elemento en particular del DOM.
Vue tiene un sistema muy cómodo para Escuchar eventos nativos en Vue y este artículo nos vamos a fijar solo en el de click.
Para escuchar un evento de click tenemos que usar la sintaxis de @click en la vista, en la parte del DOM que queramos.
Por ejemplo pongamos que queremos ejecutar una función cuando el usuario haga click en un botón:
<template>
<div class="content">
<button @click="calculate()">Calculate</button>
</div>
</template>
<script>
export default {
data: () => ({
value: 20,
}),
methods: {
calculate() {
let aux = this.value;
console.log(this.double(aux));
},
double(value) {
return value * 2;
},
},
};
</script>
<style scoped></style>Listo, si abres la página y haces click en el botón, en la consola del navegador verás que se pinta el número.
Lo bueno de los eventos de click es que los podemos asociar con cualquier etiqueta del HTML, no tiene por qué ser botones (aunque por temas de accesibilidad lo mejor es botones), por ejemplo:
<template>
<div class="content">
<span @click="calculate()">Calculate</span>
</div>
</template>
<script>
export default {
data: () => ({
value: 20,
}),
methods: {
calculate() {
let aux = this.value;
console.log(this.double(aux));
},
double(value) {
return value * 2;
},
},
};
</script>
<style scoped></style>Este ejemplo funciona exáctamente igual que el ejemplo anterior.
Como las propiedades del data son reactivas, cuando actualicemos su valor dentro de un método se actualizará cambiando automáticamente la vista:
<template>
<div class="content">
<button @click="increment()">Increment</button>
<span> Current value: {{value}}</span>
</div>
</template>
<script>
export default {
data: () => ({
value: 20,
}),
methods: {
increment() {
this.value++;
},
},
};
</script>
Modificadores de los eventos de click
Como pasaba con el Bindeo del v-model de Vue 🚧, aquí también existen modificadores que cambian un poco el compartamiento del evento de click. Para usarlos hay que poner un punto tras el evento y el nombre del modificador:
- prevent: Evita que el evento se propague a los elementos superiores del
- once: Solo se va a ejecutar el manejador del evento una sola vez, aunque se hagan más clicks.
- self: En este caso el manejador del evento solo se va a ejecutar cuando el event.target del listener sea solo el propio elemento en sí.
Por ejemplo:
<button @click.prevent="increment()">Increment</button>