Trigger the click handler in Vue component
Posted on January 19, 2020
In Vue.js you can create components to wrap HTML elements. No surprise here.
Within any component you can add
@click directive to HTML elements, such as:
<template> <div> <div @click="doSomething"> Some text </div> </div> </template>
That's basic stuff and it just work as expected.
If, instead, you add a
@click statement to a custom Vue component, such as:
<template> <div> <MyComp @click="doSomething" /> </div> </template>
it is not going to work, but, don't panic, it's easy to fix with:
<template> <div> <MyComp @click.native="doSomething" /> </div> </template>
.native directive make the custom component reactive to the native events as well.