VueJS part 5: Handling events

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I am covering how to use event handlers in the Vue.

Vue logo

On event directive

Vue comes with a directive that helps us handle many different types of events. That directive is a v-on directive. However, you can’t just write v-on, you need to tell somehow which type of event you are handling. You do that by adding a colon and event type after it.

v-on:[EVENT_TYPE]=”[HANDLER]”

This might be clearer with the example. So let’s start with adding a function we can use for handling click events. In the initialization object, under methods, we can add the handleClick method.

Vue.createApp({
  data() {
       return {}
  },
  methods: {
    handleClick: function() {
      console.log(“hello world”)
  }
}).mount(“#app”)

Now if you want to use this in your HTML all you need to do is add that v-on directive to some element.

<button type="button" v-on:click="handleClick()">Click me</button>

Handler code

In the example above, I used the handleClick() string as code for handling the event. However, there are some important things…