如何在vuetify项目中更新firebase文档数据

Question

我最近完成了一个vuetify tutorial by the Net Ninja on youtube并创建了一个待办事项清单。现在，我希望能够在任务中单击“标记为完成”按钮来访问我的firebase集合（称为“项目”）并使用值“完成”更新相应的文档字段（状态）。我已经能够使用query.get()并在我的控制台中显示正确的文档数据，但我不知道如何在此时更新文档。

这是一个按钮，它是v-for循环的一部分，用于呈现我的内容：

<v-btn v-if="project.status !== 'complete'" @click="updateData(project.title)" class="success ml-0">Mark as complete <v-icon right>check</v-icon></v-btn>

我可以使用此方法从正确的文档中获取数据并将其登录到控制台：

updateData(projectTitle){
    db.collection("projects").where("title", "==", projectTitle)
    .get()
      .then(function(querySnapshot){
        querySnapshot.forEach(function(doc){
          console.log(doc.id, " = >", doc.data());
        });
      })  
  }

我只是不确定如何从这里实际更新文档。我已经能够使用这一行来更新文档，包括真正的长文档'代号'......

db.collection('projects').doc('tjwnZZHGDkZWJxpXMdHj').update({
  status: 'complete'
})

但有没有办法稍微修改该行并将其插入querySnapshot函数？如果没有，我如何在querySnapshot函数中更新所选文档？

Answer 1

你的querySnapshot包括DocumentSnaphots。从这些你可以得到DocumentReference，你就可以打电话给.update()

---

结果应如下所示：

updateData(projectTitle){
    db.collection("projects").where("title", "==", projectTitle)
    .get()
      .then(function(querySnapshot){
        querySnapshot.forEach(function(doc){
          doc.ref.update({status: 'complete'});
        });
      })  
  }

它应该工作，然后我会考虑使用batch请求。 （我也更新到async/await）。 batch的最大值为500次。检查https://firebase.google.com/docs/firestore/manage-data/transactions

async updateData(projectTitle){
    var batch = db.batch();
    var querySnapshot = await db.collection("projects")
                                .where("title", "==", projectTitle)
                                .get();
    querySnapshot.forEach(function(doc){
          batch.update(doc.ref, { status: 'complete'});
    });
    batch.commit();
  }