Vue v-on:click does not work on component

by

If you want to listen to a native event on the root element of a component, you have to use the .native modifier for v-on, like following:

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

or in shorthand, as suggested in comment, you can as well do:

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

Reference to read more about native event

More Related Contents:

  1. How to add external JS scripts to VueJS Components?
  2. Communication between sibling components in Vue.js 2.0
  3. [Vue warn]: Property or method is not defined on the instance but referenced during render
  4. How to listen for ‘props’ changes
  5. Passing props dynamically to dynamic component in VueJS
  6. Vuejs typescript this.$refs..value does not exist
  7. Is there any way to ‘watch’ for localstorage in Vuejs?
  8. Vue template or render function not defined yet I am using neither?
  9. Global data with VueJs 2
  10. When should I use Vuex?
  11. Vue.js – Add class to clicked button
  12. Use arrow function in vue computed does not work
  13. How to use .env variables in Nuxt 2 or 3?
  14. Vue 2 – Mutating props vue-warn
  15. VueJS: why is “this” undefined?
  16. Make VueJS and jQuery play nice
  17. Vue.js – How to properly watch for nested data
  18. VueJs 2.0 emit event from grand child to his grand parent component
  19. Can I pass parameters in computed properties in Vue.Js
  20. Vue – Deep watching an array of objects and calculating the change?
  21. How to call function on child component on parent events
  22. How to install jQuery into Nuxt.js?
  23. Access vue instance/data inside filter method
  24. Parentheses while calling a method in Vue
  25. Passing props with programmatic navigation Vue.js
  26. Vue.js – update router view
  27. How to limit iteration of elements in `v-for`
  28. Property ‘XXX’ does not exist on type ‘CombinedVueInstance’
  29. Detect Back Button in Navigation Guards of Vue-Router
  30. What’s the correct way to pass props as initial data in Vue.js 2?

Leave a Comment