Notikumu apstrādes funkciju pievienošana Vue

Tagad palaidīsim mūsu metodi kādam notikumam. Lai pievienotu notikumu kādam DOM elementam, jāizmanto direktīva v-on.

Šajā direktīvā pēc kola jānorāda notikuma nosaukums, un vērtībā - metodes nosaukums, kas jāizsauc, kad šis notikums notiek.

Izmēģināsim praksē. Pieņemsim, ka mums ir šāda metode:

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

Pieņemsim, ka mums ir šāda poga:

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

Padarīsim tā, lai, noklikšķinot uz šīs pogas, tiktu izsaukta metode show:

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

Parasti visi izmanto saīsināto variantu v-on. To attēlo simbols @ pirms notikuma nosaukuma:

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