[英]How can I make delete function real-time using firebase / vue.js
<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>
I am a beginner .我是初学者。 This code above is the delete button with function
removeData(project.id)
, and this code below shows the function:上面的代码是带有 function
removeData(project.id)
的删除按钮,下面的代码显示了 function:
removeData(doc) {
if (confirm("Are you sure ?")) {
db.collection("projects")
.doc(doc)
.delete()
.then(() => {
console.log("Document successfully deleted!");
});
}
},
It worked successfully, but I don't know how to make it real-time with Firestore.它成功运行,但我不知道如何使用 Firestore 使其实时。 I know only how to make it real-time when I add something as you see in the code below:
我只知道当我添加一些东西时如何使它成为实时的,如下面的代码所示:
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
}
});
});
},
If this.projects
is an array, you can remove the delete item from it with:如果
this.projects
是一个数组,您可以使用以下命令从中删除删除项:
if (change.type === "removed") {
this.projects = this.projects.filter(item => item.id !== change.doc.id);
}
Also see the MDN documentation on Array.filter
.另请参阅
Array.filter
上的 MDN 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.