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

Question

我最近完成了一个 vuetify tutorial by the Net Ninja on youtube and created a todo list. Now I want to be able to click on a 'mark as complete' button in a task to access my firebase collection (called 'projects') and update the corresponding document field (status) with the value 'complete'. I've been able to use 并在我的控制台中显示了正确的文档数据，但我不知道此时如何更新文档。

这是呈现我的内容的 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());
        });
      })  
  }

我只是不确定如何从这里实际更新文档。我已经能够使用这一行通过包含非常长的文档 'codename'...

来更新文档

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

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

How to update firebase document data onclick in vuetify project

javascript

database

click

firebase

vuetify.js