如何使用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指令遍历嵌套Firebase数组gallery中的所有图像。删除按钮用于定位嵌套gallery数组中每个图像的ID（newUser.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的可选第二个参数来获取当前项目的索引，并使用此deleteInput()值加index来调用user.id，如下所示：

<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(user.id, index)">x</button>
  </div>
</div>
然后在deleteInput()中需要

任一

为该用户读取该数组，并用新的数组覆盖，其中您已删除位置索引处的元素

或

将arrayRemove()方法用于整个对象（事件，电子邮件，姓名等）。

我会选择第一种方法。