Check out this HTML code snippet:
<div class="list-group">
<a href="javascript:;" @click="showDetails(notification, $event)" class="list-group-item" v-for="notification in notifications" :key="notification.id">
<h4 class="list-group-item-heading" v-text="notification.title" />
<p class="list-group-item-text" v-text="notification.created_at|moment" />
</a>
</div>
Here's the associated Javascript code:
return new Vue({
methods: {
showDetails: function (notification, event) {
this.notification = notification
console.info(event.target)
}
}
}
The issue at hand is that event.target returns the specific element that was clicked on. It could be the a element itself or one of its child elements (h4 or p).
How can I ensure that I always get the a element (the one with the @click handler), even if the user clicks on one of its child elements?