Firebase Firestore修改指定文档时总是更新最后一条且快照不实时更新

问题1：总是更新最后一条文档的解决方法 #

你把编辑弹窗<v-dialog>写在了v-for循环内部，所有项目共用同一份dialog、newTitle、newContent、newDue全局状态，循环渲染时后面的项目会覆盖前面的绑定关系，最终提交时拿到的永远是最后一个项目的对应值，修改步骤如下：

1. 把<v-dialog>整段从v-for循环里挪到</v-card>循环结束后的外层，同时在data中新增currentEditId: ''字段，用来存储当前正在编辑的项目ID。
2. 调整编辑按钮触发逻辑，新增方法存储当前选中项目的原始值：

// 新增编辑弹窗打开方法
openEditDialog(project) {
  this.currentEditId = project.id
  this.newTitle = project.title
  this.newContent = project.content
  this.newDue = project.due
  this.dialog = true
}

模板里的编辑按钮调整为：

<v-btn dark class="modifyProject small mx-1 grey v-btn v-btn--outlined v-btn--text theme--dark v-size--default" @click="openEditDialog(project)">
  <v-icon left>mdi-pencil</v-icon>
  edit
</v-btn>

3. 调整移到外层的弹窗标题，替换原来的项目ID绑定：

<v-card-title class="text-h5">
  edit project #: {{currentEditId}}
</v-card-title>

4. 将v-for的key从索引i改为project.id，避免数组变动时渲染错位：

<v-card flat :class="`grey lighten-3 mb-1 border project ${project.status}`" v-for="project in projectsArray" :key="project.id" :id="project.id">

问题2：snapshot监听修改不实时生效的解决方法 #

你在onSnapshot的回调中没有正确更新本地的响应式数组projectsArray，反而直接操作DOM和快照对象本身，Vue无法监听到数据变动自然不会更新视图，直接替换created中的监听逻辑即可：

onSnapshot(q, snapshot => {
  snapshot.docChanges().forEach(change => {
    const docId = change.doc.id
    const docData = {...change.doc.data(), id: docId}
    if (change.type === "added") {
      this.projectsArray.push(docData)
    }
    if (change.type === "modified") {
      // 找到数组中对应ID的项，替换为最新数据
      const index = this.projectsArray.findIndex(item => item.id === docId)
      if (index !== -1) {
        this.projectsArray.splice(index, 1, docData)
      }
    }
    if (change.type === "removed") {
      // 直接从数组中删除对应项，无需手动操作DOM
      const index = this.projectsArray.findIndex(item => item.id === docId)
      if (index !== -1) {
        this.projectsArray.splice(index, 1)
      }
    }
  })
})

完成以上修改后两个问题均可正常解决。

内容的提问来源于stack exchange，提问作者Hany Taha