Sometimes, we want to fix Vue v-on:click not working on a component

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

How to fix Vue v-on:click not working on a component?

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.

For instance, we write

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

to set @click.native to testFunction to call testFunction with a click is done on anything in the test component.

Conclusion

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.