Handling Click Events with Vue onclick

In this guide, we will look at event handling using Vue onclick directive. Say we have an element (supposedly a button) that we want to trigger a function on click, this directive comes in handy.

<template>
  <div>
    <button type="button" v-on:click="doSomething">Display</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      alert("Done said something");
    },
  },
};
</script>

The onclick directive can also be referenced as such:

 <button type="button" @click="doSomething">Display</button>