Pridávanie obslužných metód udalostí vo Vue

Teraz spustíme našu metódu pomocou nejakej udalosti. Ak chcete pridať udalosť na nejaký DOM prvok, musíte použiť direktívu v-on.

V tejto direktíve za dvojbodkou treba uviesť názov udalosti, a ako hodnotu - názov metódy, ktorá sa má zavolať pri výskyte tejto udalosti.

Skúsme to v praxi. Predpokladajme, že máme nasledujúcu metódu:

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

Predpokladajme, že máme nasledujúce tlačidlo:

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

Urobme tak, aby pri kliknutí na toto tlačidlo volala metóda show:

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

Zvyčajne všetci používajú skrátenú verziu v-on. Predstavuje ju symbol @ pred názvom udalosti:

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