如何为单击的文档获取自动生成的 id

Question

我使用 vue 和 firestore。

我通过下面的代码生成了集合中的文档。

<template>
  <input type="text" v-model="form.title">
</template>

methods: {
  async saveform () {
    await db.collection('forms').add(
      {
        title: this.title
      }
    )
  }
}

我通过下面的代码阅读了它。

<div v-for="(form, i) in forms" :key="form.id">
  {{form.title}}
<button @click="readid">readid</button>
<button @click="deleteform">delete</button>
</div>

async created () {
  const sn = await db.collection('forms').get()
  sn.forEach(doc => {
    const { title } = doc.data()
    this.forms.push({
      title
    })
  })

我想通过点击上面代码中的readit按钮来获取点击的表单的ID。

因为要使用 db.collection('forms').doc().delete()

这是因为我需要知道被点击表单的 ID 才能将 id 放入 doc() 中。

请帮助我。 Firestore官方文档不足以处理自动生成的id。

如果没有足够的解释，请发表评论。我愿意编辑。 在弄清楚这一点之前我不会睡觉，所以我可以随时编辑它。

-编辑- 对不起，我没有正确解释。我不只是知道身份证。我想创建一个代码，当我单击表单中的删除按钮时删除表单。

我想我会更改问题并再次发布。

Answer 1

要获取已创建文档的id，您可以使用这种代码：

const formSnap=await db.collection('forms').add(
      {
        title: this.title
      }
    )

//your id
console.log('id',formSnap.id)

如果您想在添加任何数据之前获取id，您可以这样做：

const ref = db.collection("forms").doc();
console.log('id',ref .id)

如果你在循环中需要它：

async created () {
  const sn = await db.collection('forms').get()
  sn.forEach(doc => {
    const { title } = doc.data()
    console.log('id',doc.id) // here is it in the loop
    this.forms.push({
      title
    })
  })

要通过单击按钮删除表单数据，您首先需要将formID 值存储在某处，然后使用它来删除表单数据：

methods: {
  async saveform () {
    const formSnap=await db.collection('forms').add(
      {
        title: this.title
      }
    )

  return formSnap.id
  },
async deleteform(fID) {
   await db.collection('forms').doc(fID).delete()
  }
}

然后这样称呼它：

await deleteform(formID)

Answer 2

在我的应用程序中，我可以使用以下代码：

let response = await firestore.collection("db").doc(dbId).get();
this.file = response.data();
console.log("doc id", response.id);

所以我认为这应该可行：

const sn = await db.collection('forms').get();

sn.forEach(doc => {
    const { title } = doc.data()
    const id = doc.id // <-- This is it
    
    this.forms.push({
        title
    });
})

好的，如果你想在“deleteform”函数被调用的情况下删除文档，那么这应该可以工作：

// Your Template
<div v-for="(form, i) in forms" :key="form.id">
    {{form.title}}
    <button @click="readid">readid</button>
    <button @click="deleteform(form.id)">delete</button>
</div>

// Your created hook
async created () {
    const sn = await db.collection('forms').get();

    sn.forEach(doc => {
        const { title } = doc.data()
        const id = doc.id // <-- This is it
    
        this.forms.push({
            title,
            id,
        });
    })
}

// And your function for deleting the document
async deleteform(docId) {
    await db.collection('forms').doc(docId).delete()
}

希望能帮到你！