I'm currently working on a Vue component that is responsible for displaying notifications which should automatically disappear after a set time. My Alert component triggers an 'expired' event and then I handle this event in the parent component by removing the notification from the data array using splice. While this method works most of the time, there are instances where the alerts remain visible.
Vue.component('alert', {
template: '<li><slot></slot></li>',
mounted() {
setTimeout(() => this.$emit('expired'), 2000)
}
});
new Vue({
el: '#app',
data: {
count: 0,
alerts: []
},
methods: {
createAlert(){
this.alerts.push(this.count++)
},
removeItem(index) {
this.alerts.splice(index, 1)
}
}
});
To see the issue in action, please visit this Fiddle and click the Create Alert button multiple times. You'll notice that some alerts do not dismiss as expected. Any suggestions on how to address this?