Question

我有一个本地数组，该数组填充在来自Firestore数据库的查询中。当我尝试将元素写入集合中的新文档时，该数组将填充重复项。在此表格中，有一位家长可以输入孩子的名字。出于数据结构的目的，我想将每个孩子都存储在自己的文档中并带有父级引用。我正在尝试第一次将相同的组件用于父级重定向到他们的个人资料/无子级，然后再输入其他子级。

<q-form @submit="update">
  <q-input class="q-mt-xs" stack-label square outlined v-model="user.displayName" type="Line" label="Name" />

  <div v-if="this.myChildren.length === 0">
    <q-input v-model="name" type="text" label="Child Name" @blur="addFirstChild(name)">
      <template v-slot:append>
        <q-icon name="fas fa-minus" @click="removeChild(child, index)"/>
      </template>
      <template v-slot:after>
        <q-icon name="fas fa-plus" @click="addChild()"/>
      </template>
    </q-input>
  </div>
  <div v-else>
    <div v-for="(child, index) in myChildren" :key="child.id">
      {{ child }}
      <q-input v-model="child.name" type="text" label="Child Name">
        <template v-slot:append>
          <q-icon name="fas fa-minus" @click="removeChild(child, index)"/>
        </template>
        <template v-slot:after>
          <q-icon name="fas fa-plus" @click="addChild"/>
        </template>
      </q-input>
    </div>
  </div>

</q-form>


<script>
import { firebaseDB } from '../boot/firebase'

export default {
  name: 'Profile',
  data () {
    return {
      user: {
        children: []
      },
      myChildren: [],
      name: ''
    }
  },
  firestore () {
    return {
      user: firebaseDB.collection('users').doc(this.$route.params.id),
      myChildren: firebaseDB.collection('children').where('parentID', '==', this.$route.params.id)
    }
  },
  methods: {
    addChild () {
      this.myChildren.push({ 'name': '', 'parentID': this.user.id })
    },
    addFirstChild (child) {
      this.myChildren.push({ 'name': child, 'parentID': this.user.id })
    },
    update () {
      firebaseDB.collection('users').doc(this.user.id).set(this.user).then(() => {
        var updateChildrenArray = [...this.myChildren]
        updateChildrenArray.forEach((child) => {
          console.log('child: ', child)
          firebaseDB.collection('children').add(child).then(() => {
          })
        })
      })
    },
    removeChild (child, index) {
      this.myChildren.splice(index, 1)
    }
  }
}
</script>

因此，当用户单击“提交”按钮时，列表呈现将与条目一起翻倍。我什至尝试克隆该数组，并使用该数组写入Firestore DB，以免影响数据下定义的数组。

感谢您的帮助。

Firestore写入后本地阵列获取重复条目

0 个答案: