Vue:如果数据库写入失败，则撤消从v-for数组中删除项

Question

我有一个消息的v-for循环。当用户单击删除按钮时，我希望快速将其从UI中删除，并从数据库中删除消息。如果由于某种原因数据库写入失败，我如何像从未发生过一样"撤消"删除？我想把splice设置为一个变量，但我该如何再次回到那个位置？

<div v-for="(item,index) in items" :key="item.id">
<button @click="deleteItem(item,index)">Delete Item</div>
</div>
deleteItem(item,index) {
this.items.splice(index, 1);
axios.delete('http://localhost:5000/api/posts/' + item._id)
.then(resp => {
if (resp.status != 200) {
//UNDO splice of items
}
})
},

Answer 1

您可以获得将被删除的元素，然后将其插入，以防在数据库中删除失败

deleteItem(item,index) {
let el = this.items.slice(index, index+1)[0];
this.items.splice(index, 1);
axios.delete('http://localhost:5000/api/posts/' + item._id)
.then(resp => {
if (resp.status != 200) {
//UNDO splice of items
this.items.splice(index, 0, el);
}
})
},