Handling Events With Vue.js

Vue.js allows us to handle events triggered by the user. Handling events helps add interactivity to web apps by responding to the user’s input. Vue provides us with the v-on directive to handle these events.

Previously we discussed computed properties in vue.js.

v-on directive

User interactions with the website can trigger events on the DOM such as click and keyup. We can use the v-on directive to handle these events.

As a simple example, we can implement a counter that increments every time a user clicks a button. Let’s start off by initializing a counter to zero in the data model:

data() {
  return {
    counter: 0
  }
}

Now, in our view template, we can use a text binding to show our counter and one button to listen on click event to increment our counter variable.

<label>Count is: {{counter}}</label>
<button v-on:click="counter++">Add 1</button>

v-on will trigger the expression or the method specified when the click event is triggered on the element.

Binding methods to v-on

We can also bind methods to the v-on directive. So that it will call that method whenever the event is triggered. For example

<input v-model="amount">
<button v-on:click="add">Add</button>

This will display an input that’s bound to the amount variable in our model. And add method will add this amount to our counter variable.

methods: {
  add: function() {
    this.counter = this.counter + parseInt(this.amount);
    this.amount = 0;
  }
}

Finally, we reset the amount variable.

Shorthand for v-on

Instead of writing the full v-on: directive in our code, we can use the shorthand way of doing it with @. This way our above method binding will become like this.

<button @click="add">Add</button>

Event Modifiers

There are a lot of times when modifier function calls are made when handling events. Such as event.preventDefaults(). Vue provides a very intuitive way of calling these modifiers along with our directive like the following

<a href="something" @click.prevent="add">Add</a>

If we don’t add a prevent modifier to our event it would try to redirect to something. But prevent allows us to overwrite the normal behavior.

Event modifiers in Vue

  • stop – Prevents event bubbling up the DOM tree
  • prevent – Prevents default behavior
  • capture – Capture mode is used for event handling
  • self – Only trigger if the target of the event in itself
  • once – Run the function at most once

Key Modifiers for Events Vue js

Similar to event modifiers we also have key modifiers. This gives us a shorthand way of writing event handling code right into the template itself. For example, when you want to do something only when a certain key is pressed you will have to check if the key pressed is equaled to what you wanted. But here you can bypass all that such as.

<button @keyup.enter="add">Add</button>

So this tells Vue that we have to listen for keyup events and only when the key is enter key you call the add method.

There are a lot of options to use here some of them are space, enter, esc, tab, delete, etc.

You can also set up your own alias for keycodes as follows:

Vue.config.keyCodes.a = 65

Next, you can learn how to bind styles in Vue js.

Imad

I am a Software Engineer with ample experience in making games, websites, mobile apps and augmented reality solutions.

Pin It on Pinterest