Vue 2 how to do real time updates on delete with firebase

Question

I have recently approached vue and vuetify, i follow some tutorials here and there and by reading some pdfs i have created a todo-list with firebase integration, but i have a problem that i can't manage and it's the following:

When you add an element to the db via the frontend it is regularly shown, but if i go to delete it, it is deleted from the back-end but not in the front-end, until the page is updated at least.

script:

<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>

Basically I can not update the method onSnapshot() when i go to delete a specific id, or rather, i managed to do it using the pop() or slice() function but in reality they delete the last elements added to the array or the first ones , therefore not those really selected.. can anyone help me?

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

You can filter the projects array by skipping the project having the same id as deleted project's id. You can try something like this:

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