如何使用 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数组。