Evento click en Vue.js

Author
By Darío Rivera
Posted on 2020-09-27 in Vue.js

El manejo de eventos en Vue.js puede realizarse gracias a la directiva v-on. Para hacer bind de un evento basta utilizar esta directiva seguida del evento que se quiere enlazar y la expresión a utilizar. Veamos a continuación la sintaxis de esta directiva.

v-on:event="expression"

Evento Click

Dado que con esta directiva puede utilizarse una expresión en el valor de la propiedad puede ejecutarse una sentencia javascript o cualquier función definida en la instancia de Vue. Veamos algunos ejemplos que puede realizarse con este evento.

Expresiones

Observemos el siguiente ejemplo en donde se define dos números a sumar y una propiedad que contiene el resultado de este cálculo.

var vue = new Vue({
 el: "#app",
 data: {
   n1: 0,
   n2: 0,
   sum: 0
 }
});

Para observar este ejemplo en ejecución podemos utilizar el siguiente HTML.

<div id="app">
 Type the first number:
 <input type="number" v-model.number="n1"><br />
 Type the second number:
 <input type="number" v-model.number="n2"><br />
 <button v-on:click="sum = n1 + n2">Sum</button><br />
 The sum is: {{ '\{\{ sum \}\}' }}
</div>

Observa cómo funciona este ejemplo en codepen.


Como puedes darte cuenta la expresión que se ha utilizado es sum = n1 + n2. Al cambiar el valor de la propiedad sum se actualiza el html mostrando el resultado.

Métodos

Ahora veamos que también podemos colocar una función en el evento click.

var vue = new Vue({
 el: "#app",
 data: {
   n1: 0,
   n2: 0,
   ans: 0
 },
 methods: {
   sum: function() {
     this.ans = this.n1 + this.n2;
   }
 }
});

Con esto el HTML cambiaría así:

<div id="app">
 Type the first number:
 <input type="number" v-model.number="n1"><br />
 Type the second number:
 <input type="number" v-model.number="n2"><br />
 <button v-on:click="sum">Sum</button><br />
 The sum is: {{ '\{\{ ans \}\}' }}
</div>

Puedes ver este ejemplo en funcionamiento en codepen.


Métodos con parámetros

Es igualmente posible utilizar una función como parámetro en la expresión del evento evento click así.

var vue = new Vue({
 el: "#app",
 data: {
   n1: 0,
   n2: 0,
   ans: 0
 },
 methods: {
   sum: function(a, b) {
     this.ans = a + b;
   }
 }
});
<div id="app">
 Type the first number:
 <input type="number" v-model.number="n1"><br />
 Type the second number:
 <input type="number" v-model.number="n2"><br />
 <button v-on:click="sum(n1,n2)">Sum</button><br />
 The sum is: {{ '\{\{ ans \}\}' }}
</div>

A continuación este mismo ejemplo en codepen.



Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.