如何使用 Vue.js 刪除嵌套的 Firebase 數據

Question

我正在嘗試構建一個 Vue.js 組件，該組件可以刪除嵌套的 Firebase 數據。 我的組件目前如下所示：

<v-flex v-for="user in users" :key="user.id" xs12 md12>
  <v-layout row wrap>
    <v-flex v-for="newUser in user.gallery" :key="newUser.id" xs12 sm6 md3>
      <v-img :src="newUser.image" />
      <v-btn @click="deleteImg(newUser.id)">x</v-btn>
    </v-flex>
  </v-layout>
</v-flex>

該組件使用 v-for 指令首先循環遍歷所有返回到users數組的 Firebase 項目。 第二個 v-for 指令循環遍歷名為gallery的嵌套 Firebase 數組中的所有圖像。 刪除按鈕旨在定位嵌套gallery數組中每個圖像 (newUser.id) 的 id。 這是deleteImg()方法：

    deleteImg (img) {
      db.collection('users').doc(img).delete()
    }

當我單擊deleteImg()按鈕時，我收到以下處理程序錯誤：

Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined

如何調整deleteImg()處理程序以根據嵌套數組中的 id 正確定位圖像？ 謝謝！

******修訂******

這是我想要完成的更好示例的完整代碼。 基本上，該組件設置為將新輸入推送到一個名為events的數組中（它已經作為 Firebase 中的文檔字段存在），然后將user.events中的這些數組項返回到屏幕。 正如您在下面的屏幕截圖中所見，這些輸入的項目存儲在事件數組中。 這些數組項在屏幕上渲染得很好。 我正在嘗試刪除這些數組項，但不確定如何正確定位它們。 如何配置deleteInput()方法以定位這些數組項？

<template>
  <div class="input">
    <input v-model="newInput" />
    <button @click.prevent="addInput()">submit</button>
    <br><br>
    <div v-for="user in users" :key="user.id">
      <div v-for="newUser in user.events" :key="newUser.id">
        <h3>{{ newUser.name }}</h3>
        <button @click="deleteInput(newUser.id)">x</button>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase'
import { db } from '@/main'
export default {
  name: 'HelloWorld',
  data: () => ({
    newInput: null,
    users: []
  }),
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let snapshot = await db.collection('users').get()
      const users = []
      snapshot.forEach(doc => {
        let appData = doc.data()
        appData.id = doc.id
        users.push(appData)
      })
      this.users = users
    },
    async addInput () {
      let finalInput = this.newInput
      let querySnapshot = await db.collection('users').where('user_id', '==', firebase.auth().currentUser.uid).get()
        querySnapshot.forEach(function(doc) {
          doc.ref.update({'events': firebase.firestore.FieldValue.arrayUnion({
            'name': finalInput
          })
        })
      })
      this.newInput = ''
      this.getData()
    },
    deleteInput (item) {
      db.collection('users').doc(item).delete()
    }
  }
}
</script>

Answer 1

您的問題中有兩段代碼（不知何故是兩個鏈接但不同的問題）：最初的一段和 REVISION 之后的一段。

讓我們首先給出第一個問題的答案：使用 Vue.js 組件代碼，您需要一個users數組，如下所示：

  users: [
    {
      id: 1,
      gallery: [
        { id: 11, image: "http://...image1.jpg" },
        { id: 12, image: "http://...image2.jpg" },
        { id: 13, image: "http://...image3.jpg" }
      ]
    },
    {
      id: 2,
      gallery: [
        { id: 21, image: "http://...image1.jpg" },
        { id: 22, image: "http://...image2.jpg" },
        { id: 23, image: "http://...image3.jpg" }
      ]
    }
  ]

這意味着您必須“構造”您的 Firestore 文檔，使其返回具有這種格式的數組。

---

對於第二個問題（在 REVISION 子標題之后）：

您應該使用v-for的可選第二個參數來獲取當前項目的索引，並使用此index值加上user.id調用deleteInput() ，如下所示：

<div v-for="user in users" :key="user.id">
  <div v-for="(newUser, index) in user.events" :key="newUser.id">
    <h3>{{ newUser.name }}</h3>
    <button @click="deleteInput(user.id, index)">x</button>
  </div>
</div>

然后在deleteInput()你需要

任何一個

用一個新的events數組覆蓋user的events數組（id == user.id），您在其中刪除了 position index處的元素，

或者

對整個 object（事件、email、名稱等）使用arrayRemove()方法。

我會選擇第一種方法。

請注意，根據您的確切用例，您可能必須在事務中執行此操作，以確保在初始讀取和修改之間未修改events數組。