在超时时从阵列中删除项目

我正在创建一个组件，以显示在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按钮点击几次，有些警报将不会被解雇。有关如何解决这个问题的任何想法？

来源

2017-03-27 enriqg9

提示：当一个项目从数组中移除时，它后面的项目的索引会发生什么？ – nnnnnn

@nnnnnn他们重置并重新从0开始，但是如果在JavaScript中没有关联数组，那么如何删除特定项？ – enriqg9

我不知道Vue知道什么是“批准的”Vue方法，但JS确实有对象，所以也许有一种方法是让一个具有“id”和“text”属性的对象数组（或无论），并在删除功能搜索数组的对象与右'ID'。 – nnnnnn

正如在评论中提到的，不要通过索引来做到这一点。这是一个选择。

<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。

来源

2017-03-27 01:49:44 Bert

谢谢，你能解释一下这里使用的key属性是什么吗？ – enriqg9

@ enriqg9无论何时您使用'v-for'，您*都应该使用'key'属性来帮助Vue识别正确的节点以从列表中添加/删除。 https://vuejs.org/v2/api/#key – Bert

从现在的文档中，“在2.2.0+版本中，对组件使用v-for时，现在需要密钥。” https://vuejs.org/v2/guide/list.html – Bert

在超时时从阵列中删除项目

回答

相关问题