Skip to content

Vue.js 2 Events

Vue.js allows us to intercept any DOM event by using the v-on directive on an element. This topic is key to making a component interactive


What are Vue.js events

Vue.js allows us to intercept any DOM event by using the v-on directive on an element.

If we want to do something when a click event happens in this element:

<template>
  <a>Click me!</a>
</template>

we add a v-on directive:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

Vue also offers a very convenient alternative syntax for this:

<template>
  <a @click="handleClick">Click me!</a>
</template>

You can choose to use the parentheses or not. @click="handleClick" is equivalent to @click="handleClick()".

handleClick is a method attached to the component:

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

Methods are explained more in detail in my Vue Methods tutorial.

What you need to know here is that you can pass parameters from events: @click="handleClick(param)" and they will be received inside the method.

Access the original event object

In many cases, you will want to perform an action on the event object or look up some property in it. How can you access it?

Use the special $event directive:

<template>
  <a @click="handleClick($event)">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

and if you already pass a variable:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick: function(text, event) {
      console.log(text)
      console.log(event)
    }
  }
}
</script>

From there you could call event.preventDefault(), but there’s a better way: event modifiers

Event modifiers

Instead of messing with DOM “things” in your methods, tell Vue to handle things for you:

All those options can be combined by appending on modifier after the other.

For more on propagation, bubbling/capturing see my JavaScript events guide.

→ Get my Vue.js 2 Handbook

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list