Přidávání obslužných rutin událostí ve Vue

Nyní spusťme naši metodu na základě nějaké události. K přidání události na nějaký DOM prvek je třeba použít direktivu v-on.

V této direktivě je za dvojtečkou třeba uvést název události, a jako hodnotu - název metody, která má být volána při výskytu této události.

Pojďme to vyzkoušet v praxi. Předpokládejme, že máme následující metodu:

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

Předpokládejme, že máme následující tlačítko:

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

Udělejme, aby při kliknutí na toto tlačítko byla volána metoda show:

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

Obvykle se používá zkrácená verze v-on. Představuje ji symbol @ před názvem události:

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