Vue.js 使用Vue，删除元素后如何从屏幕中删除它们？

我正在学习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);
});

---

您应该避免直接操作道具，因为道具是由父组件提供的，可以在不通知的情况下进行更改。我会这样做：

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

---

然后，操纵并绑定

localList

数组而不是prop，这将提供您要查找的内容。

如果“item”是一个复杂对象，则无法通过===或类似的内部过滤器（）进行比较。您需要比较一个特定的属性，如id或其他一些唯一标识符来筛选出。它是。。。我可以有多个列表。从每个列表中，我可以将任何项目标记为

已完成

。我将使用特定的值进行实验。谢谢你的建议！这个概念确实适用于您正在使用的机制。我已经做了一个简单的例子，可能会有所帮助：。啊-我想我看到了问题所在。我正在将我的原始

列表作为道具传递<代码>道具：['list']，

然后在上面循环。因此，要从屏幕上删除该项目，我需要更新作为道具传入的原始列表。非常感谢！这帮我找到了正确的方向。谢谢大家的建议！

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