I've been grappling with this issue for quite some time now and I'm unable to find a solution. My approach involves Vue(JS).
What I'm attempting to achieve is to push notifications into an Object and then present them to the user. Each notification has its own functionality when clicked, but I'm having trouble implementing the delete feature.
I am leveraging Vue's reactive properties for this task.
I have extensively researched how to delete an object using its own function, but I haven't had any success so far.
The reason I refrain from using @click to delete the object as well is because I want to ensure that the action within the notification is executed before deletion.
I have created a simplified JSFiddle: https://jsfiddle.net/eywraw8t/319133/
new Vue({
el: "#app",
data: {
notifications: [
{
text: "Some notification",
action: function() {
alert("Something 1");
// Once done, delete this particular notification entirely
}
},
{
text: "Another notification",
action: function() {
alert("Something 2");
// Same as above
}
}
]
}
}).notification {
background-color: #bbb;
margin: 5px;
cursor: pointer;
padding: 15px;
border-radius: 3px;
box-shadow: 2px 2px 3px rgba(0,0,0,.2);
width: 200px;
transition: .1s ease;
}
.notification:hover {
background-color: #ccc;
}
body {
font-family: 'Roboto';
background-color: #eee;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
(Click on one)
<div class="notification" v-for="notif in notifications" @click="notif.action">{{ notif.text }}</div>
</div>Any assistance you can provide would be greatly appreciated. Thank you in advance.