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>
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>
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