I am attempting to create a notification system where clicking on the notification and accessing its link will result in a decrease in the total number of notifications.
<li class="header">You have {{ notificationsCount() }} notifications</li> <li>
<ul class="menu">
<li v-for="(notification, index) in notif" :notification="notification" :key="notification.id">
<a :href="notification.data.path"
@click="markAsRead(notification.id)"
@mouseup.right="markAsRead(notification.id)"
class="text-aqua">{{ notification.data.message }}
</a>
</li>
</ul>
methods: {
notificationsCount() {
return this.notif.length
},
markAsRead(index, id) {
if (this.notif.length){
axios.delete(`/notifications/${id}`)
.then(() => {
this.notif.splice(index, 1);
this.notificationsCount();
});
}
}
}
The issue arises when there is a specified link using `:href` as the notification count does not decrease. However, when the `:href` value is "#" or the `@click.prevent` method is used instead, the function executes successfully and the notification count decreases. How can I fix this?
Within the anchor tag, there are two triggers, `@click` and `@mouseup.right`, for handling new tab openings. When clicking with the right mouse button, the notification count decreases as expected because it executes via `@mouseup.right`. However, when executed through `@click`, the count does not decrease immediately, requiring a page reload to reflect the updated count.