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

【问题标题】：How to update firebase document data onclick in vuetify project如何在 vuetify 项目中更新 firebase 文档数据 onclick
【发布时间】：2019-04-10 18:28:10
【问题描述】：

我最近完成了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 函数中更新所选文档？

【问题讨论】：

标签： javascript database firebase click vuetify.js

【解决方案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();
  }

【讨论】：

谢谢你多米尼克！