タイムアウト時にアレイから項目を削除する

Question

Vueで数秒後に自動的に閉じる必要のある通知を表示するコンポーネントを作成しています。アラートコンポーネントが「期限切れ」イベントを発行し、親イベントをリッスンして削除しますそれはスプライスを持つ親データ配列からですが、これは時々動作しますが、時には 'アラート'は削除されません。

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) 
     } 
    } 
}); 

はthis Fiddleを参照してCreate Alertボタンを数回クリックして、アラートの一部が却下されません。どのようにこれを解決するための任意のアイデアですか？

Answer 1

コメントに記載されているとおり、インデックスでは行わないでください。ここに一つの選択肢があります。

<div id="app"> 
    <button @click="createAlert"> 
    Create Alert 
    </button> 
    <alert v-for="(alert, index) in alerts" :key="alert.id" :alert="alert" @expired="removeItem(alert)">{{ alert.id }}</alert> 
</div> 

Vue.component('alert', { 
    props: ["alert"], 
    template: '<li><slot></slot></li>', 
    mounted() { 
    setTimeout(() => this.$emit('expired', alert), 2000) 
    } 
}); 

new Vue({ 
    el: '#app', 
    data: { 
    count: 0, 
    alerts: [] 
    }, 
    methods: { 
     createAlert(){ 
     this.alerts.push({id: this.count++}) 
     }, 
     removeItem(alert) { 
     this.alerts.splice(this.alerts.indexOf(alert), 1) 
     } 
    } 
}); 

Your fiddle revised。