I’ve been playing with Nuxt (2.15.7
) and for whatever reason @click.stop
does not work properly in my application. Here’s a very simple component that I have that goes directly to the link rather than trapping the event and logging my statement.
<template>
<figure>
<figcaption>{{photo.description}}</figcaption>
<NuxtLink :to="url" @click.stop="goToPhoto">
<img :src="photo.images.medium">
</NuxtLink>
</figure>
</template>
<script>
export default {
props: {
photo: Object,
},
methods: {
goToPhoto() {
console.log('go to photo')
}
},
computed: {
url() {
return `/photos/${this.photo.id}`
}
}
}
</script>
If I replace the NuxtLink with the following, it works:
<NuxtLink :to="url" event="" @click.native="goToPhoto(), event => event.preventDefault()">
Any idea as to what might be causing these events to slip through or how I can better debug this?
Thanks!