Įvykių apdorojimo funkcijų pridėjimas Vue

Pabandykime paleisti mūsų metodą pagal koki nors įvykį. Norėdami priskirti įvykį kokiam nors DOM elementui, reikia naudoti direktyvą v-on.

Šioje direktyvoje po dvitaškio reikia nurodyti įvykio pavadinimą, o reikšmė - metodo, kurį reikia iškviesti įvykus šiam įvykiui, pavadinimas.

Išbandykime praktiškai. Tarkime, turime šį metodą:

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

Tarkime, turime šį mygtuką:

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

Padarykime taip, kad paspaudus ant šio mygtuko būtų iškviečiamas metodas show:

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

Paprastai visi naudoja sutrumpintą v-on variantą. Jis pavaizduojamas simboliu @ prieš įvykio pavadinimą:

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