如何使用 firebase / vue.js 实时删除功能答案

【问题标题】：How can I make delete function real-time using firebase / vue.js如何使用 firebase / vue.js 实时删除功能
【发布时间】：2021-06-14 04:51:45
【问题描述】：

<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
      }
    });
  });
},

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore vuetify.js

【解决方案1】：

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

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

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

【讨论】：