Question

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

Answer 1

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

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

然后，操纵并绑定localList数组而不是prop，这将为您提供所需的内容。

使用Vue，如何在删除元素后从屏幕上删除它们？

1 个答案: