fbpx

A Vue Event Handling Cheatsheet – The Essentials

Vue event handling is a necessary aspect of every Vue project. 

In this article, I’ll be going over the basics and providing some code examples for working with events. It will just include the tips/methods that I find the most useful, for an in-depth look at all the things Vue can do, check out the Vue docs. 

Basic Event Handling

Using the v-on directive (@ for short) we can listen to DOM events and run either a handler method or inline Javascript

<div v-on:click='handleClick' />

// OR

<div @click='handleClick' />

We’ll be covering some of the more common events that you may want to capture, click here for a complete list of DOM events.

Emitting custom events 

In addition to DOM events, we can create custom events by using the instance method $emit. This custom event can then be handled by the parent component of the instance that emits the event.

// Child Component
this.$emit('close')

// Parent Component

<child-component @close='handleClose' />

We can also pass data to our parent component. This is important because it’s a technique to reach two-way data binding in our components.

// Child Component
this.$emit('close', false)

// Parent Component

<child-component @close='isOpen = $event' />

Handling mouse modifiers

Here are a list of the primary DOM mouse events that we can capture in our v-on directive:

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='handleEvent'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
Interact with Me!
</div>

For our click events, we can also add mouse event modifiers to limit which mouse buttons will trigger our event. There are three (one for each button): left, right, and middle.

<!-- This will only trigger for the left mouse click -->
<div @mousedown.left='handleLeftClick'> Left </div>

Key Modifiers

There are three DOM keyboard events that we can listen to

<input
   type='text'
   placeholder='Type something'
   @keypress='handkeKeyPressed'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>

Often, we want to detect these events on a certain key, there are two ways to do this. 

  1. keycodes
  2. Vue has aliases for certain keys (enter, tab, delete, esc, space, up, down, left, right)
<!-- Trigger even when enter is released -->
<input
   type='text'
   placeholder='Type something'
   @keyup.enter='handleEnter'
/>

<!-- OR -->
<input
   type='text'
   placeholder='Type something'
   @keyup.13='handleEnter'
/>

System Modifiers

For certain projects, we may only want to trigger events if a user is pressing down a modifier key. A modifier key is something like command or shift. 

In Vue, there are four system modifiers.

  1. shift
  2. alt
  3. ctrl
  4. meta (cmd on macs and the windows key on windows)

This can be extremely useful for creating features like custom keyboard shortcuts inside your Vue application. 

<!-- Custom Shortcut that creates a list for Shift + 8 -->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56='createList'
/>

Going through the Vue docs, there is also an exact modifier, ensuring that the event will only be triggered if only the keys we specify are pressed and no others. 

<!-- Custom Shortcut that creates a list for Shift + 8 ONLY -->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56.exact='createList'
/>

Event Modifiers

For all DOM events, we can use some modifiers that change how they run. Whether it’s stopping propagation or prevent the default action, Vue has a couple of built in DOM event modifiers. 

<!-- Prevent Default Action -->
<form @submit.prevent>

<!-- Stop Event Propagation -->
<form @submit.stop='submitForm'>

<!-- Easy to Join Modifiers -->
<form @submit.stop.prevent='submitForm'>

<!-- Prevent event from being triggered more than once -->
<div @close.once='handleClose'> 

Using $listeners

This topic is a more advanced one. Essentially, every Vue instance has a $listeners property that contains its parents v-on event listeners. 

Using this property can be really useful when we want to call a methods event handlers from the child without having to create a long chain of $emit

Instead, we can simply just include the parent component’s event listeners onto an element in our child component. This really helps when we want reusable components and a clear component structure.

VueDose wrote a fantastic article about these “Adaptive Components”, and here’s my main takeaway.

One case could be when we have a base component, say BaseList, and you want to create a similar component with some additional functionality on top of it, like SortableList. I call them Adaptive Components (also proxy or wrapper components). When building an Adaptive Component, you usually want SortableList to keep the same API that the original BaseList in order to keep the components consistent. Which means that from SortableList you need to pass down all the props and listen to all events of BaseList.

From VueDose

To listen to all of the events from our original base component, we can use $listeners.

<BaseList
  v-on='$listeners'
/>

If we want more control over what listeners we call, we can add object destructuring and a computed property to pick and choose the elements we want. 

<BaseList
   @click='click'
   v-on='listeners'
/>

// ...

computed: {
  listeners: () => {
    const { click, ...listeners } = this.$listeners;
    return listeners;
}
     

Conclusion

Hopefully, this short cheatsheet gave you a better view of Vue event handling and what’s possible. 

As always, I recommend also checking out the Official Vue Documentation for a more in-depth look at the features of Vue event handling. 

Happy coding!