Dodawanie obsługi zdarzeń w Vue

Teraz uruchommy naszą metodę na podstawie jakiegoś zdarzenia. Aby dodać zdarzenie do jakiegoś elementu DOM, należy użyć dyrektywy v-on.

W tej dyrektywie po dwukropku należy podać nazwę zdarzenia, a wartością - nazwę metody, którą należy wywołać po wystąpieniu tego zdarzenia.

Spróbujmy w praktyce. Załóżmy, że mamy następującą metodę:

App.vuemethods: {
  show: function() {
    alert('!');
  }
}

Załóżmy, że mamy następujący przycisk:

App.vue<template>
  <button>text</button>
</template>

Zróbmy tak, aby po kliknięciu na ten przycisk wywołała się metoda show:

App.vue<template>
  <button v-on:click="show">text</button>
</template>

Zwykle wszyscy używają skróconej wersji v-on. Reprezentuje ona symbol @ przed nazwą zdarzenia:

App.vue<template>
  <button @click="show">text</button>
</template>