Håndtering af begivenheder i Vue

Lad os nu køre vores metode ved en eller anden begivenhed. For at tilknytte en begivenhed til et DOM-element, skal du bruge direktivet v-on.

I denne direktiv skal du efter kolon angive navnet på begivenheden, og værdien skal være navnet på metoden, der skal kaldes, når begivenheden indtræffer.

Lad os prøve det i praksis. Lad os sige, at vi har følgende metode:

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

Lad os sige, at vi har følgende knap:

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

Lad os gøre det sådan, at ved et klik på denne knap kaldes metoden show:

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

Normalt bruger alle den korte version af v-on. Den repræsenteres af symbolet @ foran begivenhedens navn:

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