Manipulando Eventos no Vue.js

A manipulação de eventos em elementos HTML em aplicações Vue é realizada com a diretiva v-on, seguida pelo tipo de evento a ser manipulado. Por exemplo, para capturar um clique em um botão:

<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 são expressões válidas de JavaScript que manipulam a variável counter, definida no objeto de dados da aplicação Vue.

Manipulação de Eventos em Vue.js

Para simplificar o código, é possível substituir v-on:evento pela notação abreviada @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 contém dados específicos, como o tipo de evento e o elemento alvo.

Acessando o Objeto do Evento em Vue.js

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: increase e inform. Quando o botão é clicado, o contador é incrementado e a hora da ação é registrada.

Chamando Múltiplos Métodos num Único Evento em Vue.js

Documentação oficial:

Manipulação de Evento