Evento click en 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.