Vue 2如何使用firebase实时更新删除

Question

我最近接触了 vue 和 vuetify，我在这里和那里学习了一些教程，通过阅读一些 pdf，我创建了一个带有 firebase 集成的待办事项列表，但我遇到了一个我无法管理的问题，如下所示：

当您通过前端将元素添加到数据库时，它会定期显示，但如果我去删除它，它会从后端删除，但不会在前端删除，直到页面至少更新.

脚本：

<script>
import Popup from '../components/Popup.vue'
import db from '@/fb'
// @ is an alias to /src

export default {
  components:{ Popup },
  data(){
    return{
      projects: [],
      snackbar: false
    }
  },
  methods: {

    sortBydaniele(prop){
      this.projects.sort((d,s) => d[prop] < s[prop] ? -1 : 1)
    },
    sortBysara(prop){
      this.projects.sort((d,s) => d[prop] > s[prop] ? -1 : 1)
    },

    cancella(id){ //delete
      console.log('deleted');
      db.collection('projects').doc(id).delete()
    }
  },
  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') {
          this.projects.splice(this.id, 1);
        }
      })
    })
  }
}
</script>

基本上，当我去删除特定的 id 时，我无法更新 onSnapshot() 方法，或者更确切地说，我设法使用 pop() 或 slice() 函数来做到这一点，但实际上它们删除了添加到的最后一个元素数组或第一个数组，因此不是那些真正选择的..有人可以帮助我吗？

HTML：

<template>

  <div class="dashboard">

    <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
      <span class="white--text">Aggiunto con successo!</span>
        <template v-slot:action="{ attrs }">
         <v-btn color="white" v-bind="attrs" text @click="snackbar = false">Chiudi</v-btn>
        </template>
    </v-snackbar>

    <h1 class="subtitle-1 grey--text">Dashboard</h1>

    <v-container class="my-5">

      <v-row class="mb-3">
        <v-tooltip top>
          <template v-slot:activator="{on}">
        <v-btn small depressed class="grey--text" @click="sortBydaniele('persona')" v-on="on">
          <v-icon left small>mdi-account</v-icon>
          <span class="caption text-lowercase">Daniele</span>
        </v-btn>
          </template>
          <span> Ordina le schede di Daniele</span>
        </v-tooltip>
         <v-tooltip top>
          <template v-slot:activator="{on}">
        <v-btn small depressed class="grey--text" @click="sortBysara('persona')" v-on="on">
          <v-icon left small>mdi-account</v-icon>
          <span class="caption text-lowercase">Sara</span>
        </v-btn>
          </template>
          <span> Ordina le schede di Sara</span>
        </v-tooltip>
        <v-col>
        <div align="right">
        <Popup @projectAdded="snackbar = true"/>
        </div>
        </v-col>
      </v-row>
      

       <v-card flat tile class="pa-3" v-for="project in projects" :key="project.titolo">
         <v-row row wrap :class="`pa-3 project ${project.stato}`">
           <v-col cols="12" md="7">
             <div class="caption grey--text">Ricordati di:</div>
             <div>{{ project.titolo }}</div>
           </v-col>
           <v-col xs="2">
             <div class="caption grey--text">Entro il</div>
             <div>{{ project.entro }}</div>
           </v-col>
           <v-col xs="2">
             <div align="right">
               <v-chip small :color="`${project.stato}`" :class="`v-chip--active white--text caption my-2`">{{ project.stato }}</v-chip>
             </div>
           </v-col>
           <v-col xs="2">
             <div align="right">
             <v-btn small icon @click="cancella(project.id)">
               <v-icon color="red darken-1">mdi-delete</v-icon>
             </v-btn>
             </div>
           </v-col>
         </v-row>
         <v-row cols="12">
          <v-divider></v-divider>
         </v-row>
       </v-card>

   </v-container>

  </div>
</template>

Answer 1

您可以通过跳过与id 与deleted 项目ID 相同的项目来filter 项目数组。你可以试试这样的：

 if(change.type === 'removed') {
     /* keeping all the projects except the one whose's id matches with the deleted projects id */
     const projectsWithoutTheDeletedOne = this.projects.filter(project => project.id !== change.doc.id);

     /* replace the old projects array with this new one */
     this.projects = projectsWithoutTheDeletedOne;
 }