The .native event modifier in Vue.js

Easy event handling is one of the most prominent features of Vue.js. However, there are some event handling concepts that I wish someone would have shared with me from day one!
Maybe you have encountered this problem: you have a component, say <special-button /> and you want to include it in your App.vue (or any other .vue file for that matter) and bind a click event to it:

<template>
  <div>
    <special-button @click="onClick" />
  </div>
</template>

<script>
import SpecialButton from "./components/SpecialButton";
export default {
  components: {
    SpecialButton,
  },
  methods: {
    onClick() {
      console.log("Clicked");
    },
  },
};
</script>
content_copy
Vue

Now, you will find that this event does not fire when clicking your <special-button />. The reason this does not work is because @click is a native event that you are trying to bind to a Vue component. To fix this, all you have to do is simply add the .native event modifier to your event-listener:

<template>
  <div>
    <special-button @click.native="onClick" />
  </div>
</template>
content_copy
Vue

Read more about the .native modifier on the official Vue docs:
👉 https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components