如何使用 firebase / vue.js 实时删除 function

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>

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

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 文档。