Manipulando Eventos - Vue.js
A manipulação de eventos em elementos HTML em aplicações Vue é realizada com a diretiva v-on
<button v-on:click="acao">Clique aqui</button>O tipo de evento especificado pode ser qualquer evento padrão dos elementos HTML em páginas web. A diretiva recebe as ações a serem executadas quando o evento ocorrer.
Considere o exemplo a seguir, onde um contador é incrementado ou decrementado ao clicar nos botões:
<!DOCTYPE html>
<html>
<head>
<title>Manipulação de Eventos em Vue.js</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-on:click="counter++">+</button>
<span>{{ counter }}</span>
<button v-on:click="if(counter > 0) counter--;">-</button>
</div>
<script>
const vueApp = Vue.createApp({
data() {
return { counter: 0 };
}
}).mount('#app');
</script>
</body>
</html> Aqui, as ações atribuídas à diretiva v-on
Para simplificar o código, é possível substituir v-on@evento
<button @click="counter++">+</button>
<span>{{ counter }}</span>
<button @click="if(counter > 0) counter--;">-</button>
Porém, muitas vezes, o tratamento de eventos requer várias ações, então é mais eficiente delegar a lógica para métodos definidos no objeto Vue. Por exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Manipulação com Métodos</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button @click="increase">+</button>
<span>{{ counter }}</span>
<button @click="decrease">-</button>
</div>
<script>
const vueApp = Vue.createApp({
data() {
return { counter: 0 };
},
methods: {
increase() {
this.counter++;
},
decrease() {
if (this.counter > 0) this.counter--;
}
}
}).mount('#app');
</script>
</body>
</html> Neste caso, cada botão chama um método específico que encapsula a lógica para modificar o valor de counter
Passando Parâmetros para Métodos
Também é possível passar parâmetros para métodos associados a eventos. O exemplo abaixo demonstra como incrementar ou decrementar counter por valores específicos:
<button @click="increase(4)">+</button>
<span>{{ counter }}</span>
<button @click="decrease(2)">-</button>O método associado é ajustado para receber o parâmetro:
methods: {
increase(n) {
this.counter += n;
},
decrease(n) {
if (this.counter > 0) this.counter -= n;
}
}
Acessando o Objeto de Evento
Para capturar informações detalhadas do evento disparado, o objeto de evento pode ser passado ao método manipulador:
<button @click="logEvent($event)">Clique aqui</button>O método manipulador pode acessar o objeto de evento:
methods: {
logEvent(event) {
console.log(event);
}
}
O objeto event
Além disso, é possível passar parâmetros adicionais para o método manipulador do evento com o objeto de evento. Por exemplo:
<button @click="logEvent($event, 'parametro teste')">Clique aqui</button>O método manipulador pode receber os parâmetros adicionais:
methods: {
logEvent(event, parametro) {
console.log("Evento: ", event);
console.log("Parâmetro: ", parametro);
}
}
Chamando Múltiplos Métodos
É possível chamar múltiplos métodos em um único evento. Por exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo Vue.js</title>
<meta charset="utf-8" />
<style>
button {margin:20px;}
</style>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-on:click="increase(2), inform()">+</button>
<span>{{ counter }}</span>
<div>{{ status }}</div>
</div>
<script>
const vueApp = Vue.createApp({
data() {
return {counter:0, status:''}
},
methods:{
increase(n){
this.counter = this.counter + n;
},
inform(){
this.status = "O botão foi clicado em " + new Date().toLocaleString();
}
}
}).mount('#app');
</script>
</body>
</html> Aqui, o botão chama dois métodos em um único evento: increaseinform
