如何為點擊的文檔獲取自動生成的 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。

如果沒有足夠的解釋，請發表評論。 我願意編輯。 在弄清楚這一點之前我不會睡覺，所以我可以隨時編輯它。

-edited-對不起，我沒有正確解釋它。 我不只是知道身份證。 當我單擊表單中的刪除按鈕時，我想創建一個刪除表單的代碼。

我想我會改變問題並再次發布。

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” function 時刪除文檔，那么這應該可以：

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

希望我能幫助你！