A Basic Guide to Event Handling in Vue

As with any framework, Vue lets us add reactivity to our applications and websites through events. The great thing about Vue events is they mimic Vanilla Javascript, so all the events you're used to using in Javascript can also be used in Vue.

Events in Vue

The most basic event frequently used in Vue, as well as in most Javascript, is click. The component below is a simple counter which increases by 1 every time the button is clicked. To do this, we use an inline @click event:

<script>
export default {
    data() {
        return {
            counter: 0
        }
    }
}
</script>
<template>
    <button @click="++counter">
        {{ counter }}
    </button>
</template>

Since we can write inline Javascript straight into our events, we can simply write ++counter to increase our counter data. As such, the above will increase counter any time we click the button and display that in our button element.

As mentioned before, we aren't just limited to @click. All other Javascript events work too, in the same format. This means you can use:

• @keydown
• @mousedown
• @pointerdown
• @pointerup
• @scroll
• etc.

We aren't just limited to running Javascript in line with our events. We can trigger a method or function if one is defined in our Vue Javascript. Here is the same code using a method instead:

<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function() {
            ++this.counter
        }
    }
}
</script>
<template>
    <button @click="incrCounter">
        {{ counter }}
    </button>
</template>

v-on vs @ in Vue

You may have seen events written as v-on:click vs @click. Both of these mean the same thing and are interchangeable, so use whichever one you are comfortable with!

Mouse Specific EVents

We can further modify any mouse events by using the left, middle, and right modifiers.

If you are firing a mouse-related event, like click, or mousedown, then mousedown.right will only track right mouse clicks, or mousedown.middle will only track middle mouse clicks.

<!-- left mouse clicks -->
<button @mousedown.left="incrCounter">
    {{ counter }}
</button>
<!-- right mouse clicks -->
<button @mousedown.right="incrCounter">
    {{ counter }}
</button>
<!-- middle mouse clicks -->
<button @mousedown.middle="incrCounter">
    {{ counter }}
</button>

How to use Event Data for Vue Events?

Sometimes, we want to access the event or e object in our events. In situations where we simply want to access e itself with no other arguments, we don't have to mention e - it is automatically passed directly to the function.

For example, the code below will still console log e.clientX and e.clientY whenever the user clicks the button:

<script>
export default {
	data() {
		return {
			counter: 0
    }
  },
  methods: {
    incrCounter: function(e) {
      ++this.counter
      console.log(e.clientX, e.clientY)
    }
  }
}
</script>

<template>
	<button @click="incrCounter">
    {{ counter }}
  </button>
</template>

Things become a little trickier when you have more than 2 arguments.

In these situations, there are two ways to access event data. Either encapsulate the function or use the predefined $event variable.

For example, let's say we want to increase the counter by a custom amount, and continue to console log e.clientX and e.clientY. This is achievable by using $event to pass the event data to our function:

<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function(amount, e) { 
            ++this.counter
            console.log(e.clientX, e.clientY)
        }
    }
}
</script>

<template>
    <button @click="incrCounter(5, $event)">
        {{ counter }}
    </button>
</template>

Alternatively, we could also pass the e object directly to the function as follows:

<button @click="(e) => incrCounter(5, e)">
    {{ counter }}
</button>

Custom Key Events in Vue Events

Vue tries to simplify events as much as possible. If you've made key events in the past, you'll know that frequently we only want to access a specific key.

Therefore, with key events, we can tie common keys directly to the event. For example, in this input, we will fire an event any time the user presses a keyup event:

<input @keyup="someFunction" />

But if you want to fire @keyup only when the user presses enter, we can do that with the following event:

<input @keyup.enter="someFunction" />

You can use any defined keyboard key-value, converted to kebab case. For example, PageDown is a keyboard key defined value, but in Vue, we write page-down:

<input @keyup.page-down="someFunction" />

Finally, Vue has defined some commonly used keys which are not defined values. These are enter, tab, delete, esc, space, up, down, left, right, as well as the keyboard modifiers ctrl, alt, shift and meta.

Keyboard modifiers and keys

We just mentioned the keyboard modifiers ctrl, alt, shift and meta, and these can be combined with our key values from before, to add another layer of functionality.

For example, the below will fire the keydown event, and therefore someFunction, whenever shift and enter are both pressed within the input:

<input @keydown.shift.enter="someFunction" />

Exact modifier

Finally, we can make sure only one key is being pressed by using exact. The below, for example, will only fire if enter is pressed alone.

If enter is pressed with a combination of other keys, the event will not fire:

<input @keydown.enter.exact="someFunction" />

Final Thoughts

Event control in Vue is an essential element in building any complete Vue application. I hope you've enjoyed this guide.

Also Published Here

You can find more Vue content here.