제한 시간이 지나면 배열에서 항목 제거

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.