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.