Sometimes, we want to fix Vue v-on:click does not work on component.

In this article, we’ll look at how to fix Vue v-on:click does not work on component.

How to fix Vue v-on:click does not work on component?

To fix Vue v-on:click does not work on component, we add the native modifier.

For instance, we write

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

to add a native click handler to the root element of the test component by using the @click.native directive.

We set it to testFunction so when the root element of test is clicked, testFunction is called.

Conclusion

To fix Vue v-on:click does not work on component, we add the native modifier.