使用 Vue，如何在元素被删除后从屏幕中删除它们？答案

【问题标题】：Using Vue, how can I remove elements from the screen after they have been deleted?使用 Vue，如何在元素被删除后从屏幕中删除它们？
【发布时间】：2020-01-10 18:20:15
【问题描述】：

我正在学习 Vue，我有一个待办事项列表，其中有一个复选框，我可以将其标记为完成。我的应用程序中的一切都正常工作。

当我选中复选框时，我将项目添加到 completedItems 数组。未选中时，我正在删除项目。我能够检查数组长度，它也是正确的。

我有一个可以单击的按钮，可以从我的列表中删除所有标记为完成的项目。

总体逻辑运行良好。标记为完成的状态正在工作，实际记录正在按预期删除。

但是，我无法从实际视图中删除该项目。我不确定我做错了什么——错误地更新了我的completedItems 数组或其他东西。我删除的项目只有在整页刷新后才会消失。

这是我正在做的事情：

<task v-for="item in list.items">...</task>




...
data() {
    return {
        completedItems: [],
    }
},
props: ['list'],

...

axios.delete(...)
.then((response) => {
if (response.status === 204) {
    this.completedItems = this.completedItems.filter(i => i !== item);
} else {
    console.error('Error: could not remove item(s).', response);
}).catch((error) => {
    alert(error);
});

感谢您的任何建议！

编辑

这是我现在检查匹配项的方式，并且它正确地出现，数组中的元素仍然没有从页面中删除。

this.completedItems = this.completedItems.filter(i => i.id !== item.data.id); 
 // i.id = 123
 // item.data.id = 123

【问题讨论】：

如果“item”是一个复杂的对象，你不能通过 === 或 filter() 中的类似方法进行比较。您需要比较特定的属性，例如 id 或其他一些唯一标识符才能过滤掉。
它是...我可以有多个列表。从每个列表中，我可以将任何项目标记为completed。我将尝试使用特定的值。谢谢你的建议！
这个概念确实适用于您正在使用的机制。我做了一个可能有帮助的简化示例：jsfiddle.net/e840y6of.
啊 - 我想我看到了问题所在。我将我原来的list 作为道具传递。 props: ['list'], 然后循环。因此，要从屏幕上删除该项目，我需要更新作为道具传入的原始列表。

标签： vue.js vuejs2 vue-component

【解决方案1】：

你应该避免直接操作 props，因为 props 是由父组件提供的，并且可以在没有通知的情况下更改。我会这样做：

data(){
    return{
        completedItems[],
        localList: this.list
    }
}

然后，操作和绑定 localList 数组而不是 prop，这应该会为您提供所需的内容。

【讨论】：

非常感谢！这帮助我指出了正确的方向。谢谢大家的建议！