My Button.vue component has a specific structure. I am utilizing v-on="$listeners" to transfer all listeners to the <a> element.
<template>
<a
v-bind="$attrs"
v-on="$listeners"
class="Button"
href="javascript: void(0)"
:class="{ disabled }"
@click="onClick()"
>
<slot></slot>
</a>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
}
},
methods: {
onClick() {
if (!this.disabled) {
this.$emit('click');
}
}
},
};
</script>
However, I encountered an issue when trying to customize the behavior of the @click event by defining both v-on="$listeners" and @click="onClick()". The onClickDelete function ended up being triggered twice. Even using @click.prevent did not resolve the problem.
<Button @click="onClickDelete">Delete</Button>
I am seeking a solution to apply v-on="$listeners" to all events except for @click.
For more details, you can access the code sandbox.