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

Posted 2023-02-22

【中文标题】如何使用 firebase / vue.js 实时删除功能

【英文标题】：How can I make delete function real-time using 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
      
    );
  );
,

【参考方案1】：

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

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

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