How to Make Vue v-on:click Work on Component

There is a situation when you want to use the on click directive inside a component but it doesn’t work. Here we suggest a snippet that will work like a charm.

To listen to native events on the root element of a component, the .native modifier for v-on should be used like this:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

There is a shorthand version of the above snippet:

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

Binding Native Events to The Components

There are times that you want to listen directly to a native event on the root element of a component. In such cases, the .native modifier for v-on comes to rescue. However, using it on a very specific element is not a good idea. Read more about the native events here.