I have a card where for a demand on SEO i need to put the nuxt link on the title but the whole card must be clickable with a method :
<template>
<div @click.prevent="clickit(item)" >
<img class="background" :src="item.backgroundImage" />
<nuxt-link
:to="'/road/' + item.id"
>{{ item.text }}</nuxt-link>
<img class="mask" :src="item.backgroundMask" />
</div>
</template>
<script>
export default {
props: {
item: {
type: Object,
default: () => {}
}
},
methods: {
clickit(item) {
this.$router.push({
path: "/road/" + item.id
});
}
}
};
</script>
So i did like that but the problem is when i click only in the title it fire two events. Is there a way to prevent default in a nuxt link ?
2
Answers
i've found the solution :
and then i adde this method :
Pro tip: You can also do
@click.native.prevent="fuga"
. Thene.preventDefault();
is no longer required 😉