Hendelseshåndtering i Vue

La oss nå kjøre metoden vår basert på en hendelse. For å knytte en hendelse til et DOM-element, må du bruke direktivet v-on.

I dette direktivet, etter kolon, skal du spesifisere navnet på hendelsen, og verdien skal være navnet på metoden som skal kalles når denne hendelsen inntreffer.

La oss prøve i praksis. Anta at vi har følgende metode:

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

Anta at vi har følgende knapp:

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

La oss gjøre slik at ved klikk på denne knappen kalles metoden show:

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

Vanligvis bruker alle den forkortede varianten av v-on. Den representeres av symbolet @ foran hendelsens navn:

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