如何使用firebase/vue.js使delete函数实时

Question

<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn
plain
small
color="red"
v-bind="attrs"
v-on="on"
@click="removeData(project.id)"
><v-icon>mdi-delete</v-icon></v-btn
>
</template>
<span>delete project</span>
</v-tooltip>

我是个初学者。上面的代码是具有removeData(project.id)功能的删除按钮，下面的代码显示了功能：

removeData(doc) {
if (confirm("Are you sure ?")) {
db.collection("projects")
.doc(doc)
.delete()
.then(() => {
console.log("Document successfully deleted!");
});
}
},

它成功地工作了，但我不知道如何使它与Firestore实时。我只知道当我添加如下代码中所示的内容时如何使其实时：

created() {
db.collection("projects").onSnapshot((res) => {
const changes = res.docChanges();
changes.forEach((change) => {
if (change.type === "added") {
this.projects.push({
...change.doc.data(),
id: change.doc.id,
});
}
if (change.type === "removed") {
//code goes here
}
});
});
},

Answer 1

如果this.projects是一个数组，您可以使用从中删除删除项

if (change.type === "removed") {
this.projects = this.projects.filter(item => item.id !== change.doc.id);
}

另请参阅Array.filter上的MDN文档。