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

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

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

脚本：

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

从“../components/Popup.vue”导入弹出窗口
从“@/fb”导入数据库
//@是/src的别名
导出默认值{
组件：{Popup}，
数据（）{
返回{
项目：[]，
snackbar:错误
}
},
方法：{
索特比达尼尔（道具）{
this.projects.sort（（d，s）=>d[prop]d[prop]>s[prop]？-1:1）
},
取消a（id）{//delete
console.log（'deleted'）；
db.collection（'projects'）.doc（id）.delete（）
}
},
创建（）{
db.collection（'projects'）.onSnapshot（res=>{
const changes=res.docChanges（）；
changes.forEach（change=>{
如果（change.type==‘已添加’）{
这个。项目。推({
…change.doc.data（），
id:change.doc.id
})
}
如果（change.type==‘已删除’）{
this.projects.splice（this.id，1）；
}
})
})
}
}

基本上，我无法在删除特定id时更新onSnapshot（）方法，或者更确切地说，我使用pop（）或slice（）函数实现了这一点，但实际上它们删除了添加到数组中的最后一个元素或第一个元素，因此不是真正选中的元素。。有人能帮我吗

Html:

成功了！
丘迪
仪表板
mdi帐户
达妮埃莱
达涅利教堂序数
mdi帐户
萨拉人
萨拉舍德顺序酒店
里科达迪：
{{project.titolo}}
恩特罗伊尔酒店
{{project.entro}}
{{project.stato}
mdi删除

您可以通过跳过与

已删除的
项目id相同的
项目来
筛选
项目数组。您可以尝试以下操作：

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

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