Firebase 如何在Firestore中存储的阵列中推送新数据

我的数据存储在Firestore中，如下所示：

created () {
    db.collection('cards').where('user', '==', this.user)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const data = {
            'id': doc.id,
            'group_name': doc.data().group_name,
            'group': doc.data().group,
            'size': doc.data().group.length
          }
          this.cards.push(data)
        })
      })
  }

    <script>
    import { db, fieldValue } from './firebaseInit'
    export default {
    name: 'dashboard',
    data () {
        return {
        cards: [],
        user: 'kikker'
        }
    },
    created () {
        db.collection('cards').where('user', '==', this.user)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach(doc => {
            const data = {
                'id': doc.id,
                'group_name': doc.data().group_name,
                'group': doc.data().group,
                'size': doc.data().group.length
            }
            this.cards.push(data)
            })
        })
    },
    methods: {
        //....
        test () {
        console.log('vd')

        db.collection('cards').doc('BdSxtZL8V4S576i2BTRs').update({
            group: fieldValue.arrayUnion({ back: 'bla', front: 'blabla' })
        })

        }
    }
    }
    </script>

其数据检索如下：

created () {
    db.collection('cards').where('user', '==', this.user)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const data = {
            'id': doc.id,
            'group_name': doc.data().group_name,
            'group': doc.data().group,
            'size': doc.data().group.length
          }
          this.cards.push(data)
        })
      })
  }

    <script>
    import { db, fieldValue } from './firebaseInit'
    export default {
    name: 'dashboard',
    data () {
        return {
        cards: [],
        user: 'kikker'
        }
    },
    created () {
        db.collection('cards').where('user', '==', this.user)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach(doc => {
            const data = {
                'id': doc.id,
                'group_name': doc.data().group_name,
                'group': doc.data().group,
                'size': doc.data().group.length
            }
            this.cards.push(data)
            })
        })
    },
    methods: {
        //....
        test () {
        console.log('vd')

        db.collection('cards').doc('BdSxtZL8V4S576i2BTRs').update({
            group: fieldValue.arrayUnion({ back: 'bla', front: 'blabla' })
        })

        }
    }
    }
    </script>

并最终以以下方式呈现：

 <div v-for="(card, groupIndex) in cards" v-bind:key="card.id" class="card-group">....</div>

firebaseInit.js

import firebase from 'firebase'
import 'firebase/firestore'
import firebaseConfig from './firebaseConfig'
const firebaseApp = firebase.initializeApp(firebaseConfig)
export default firebaseApp.firestore()

firebaseConfig.js

export default {
  apiKey: 'blabla',
  authDomain: 'blabla',
  databaseURL: 'blabla',
  projectId: 'blabla',
  storageBucket: 'blabla.appspot.com',
  messagingSenderId: 'blabla',
  appId: 'blabla',
  measurementId: 'G-blabla'
}

更新内容：

firebaseInit.js

import firebase from 'firebase'
import 'firebase/firestore'
import firebaseConfig from './firebaseConfig'
const firebaseApp = firebase.initializeApp(firebaseConfig)
export default firebaseApp.firestore()

const db = firebaseApp.firestore()
const fieldValue = firebaseApp.firestore.FieldValue

export { db, fieldValue }

dahsboard.vue

<template>
  <div id="dashboard">
    <div style="margin-bottom: 50px">
      <div v-for="(card, groupIndex) in cards" v-bind:key="card.id" class="card-group">
      <div :id="card.group_name" class="card-group-header" @click="toggleChild" >{{card.group_name}}
        <div class="group-count-label"> {{card.size}} </div>
        <div class="right">
          <div :id="card.group_name + 'B'" class="dropdown-arrow"></div>
          <div style="margin-right:10px;font-size:15px">&#8942;</div>
          </div>
      </div>
        <div class="card-group-items hidden-group" :id="card.group_name + 'A'">
          <div v-for="(value, index) in card.group" v-bind:key="index" class="collection-item">
            <div :id="card.group_name + index" class="card-group-item-header" @click="toggleItem" >
              <div class="card-group-item-header-text">
                <div class="card-group-item-header-text-front">{{value.front}}</div>
                <div class="card-group-item-header-text-back">{{value.back}}</div>
              </div>
              <div class="right">
                <div :id="card.group_name + index + 'B'" class="dropdown-arrow-b"></div>
                <div style="margin:7px 10px 0px 0px;font-size:15px">&#8942;</div>
              </div>
            </div>
              <div :id="card.group_name + index + 'A'" class="card-group-item">
                <div>
                  <div class="textbox-tip">Front</div>
                  <input type="text" class="card-group-item-input" :value="value.front" spellcheck="false">
                </div>
                <div>
                  <div class="textbox-tip">Back</div>
                  <input type="text" class="card-group-item-input" :value="value.back" spellcheck="false">
                </div>
                <div class="card-group-examples">
                  <div class="card-group-example-header"><div>Examples</div><div class="card-group-example-header-plus" @click="addExample(groupIndex,index)">&#43;</div></div>
                  <div v-for="(v, i) in value.examples" v-bind:key="i">
                    <div>
                      <div class="textbox-tip">Example {{i+1}}</div>
                      <input type="text" class="card-group-item-input" :value="v.example" spellcheck="false">
                    </div>
                    <div>
                      <div class="textbox-tip">Answer {{i+1}}</div>
                      <input type="text" class="card-group-item-input" :value="v.answer" spellcheck="false">
                    </div>
                  </div>
                </div>
                <div class="card-group-item-footer">
                  <button class="button" @click="saveUpdate(groupIndex,index,card.id)" >SAVE CHANGES</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="button" @click="test" >SAVE new</button>
    <div class="footer">
      <p>Footer</p>
    </div>
  </div>
</template>

<script>
import { db, fieldValue } from './firebaseInit'
export default {
  name: 'dashboard',
  data () {
    return {
      cards: [],
      user: 'kikker'
    }
  },
  created () {
    db.collection('cards').where('user', '==', this.user)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const data = {
            'id': doc.id,
            'group_name': doc.data().group_name,
            'group': doc.data().group,
            'size': doc.data().group.length
          }
          this.cards.push(data)
        })
      })
  },
  methods: {
    toggleChild (i) {
      var x = document.getElementById(i.target.id + 'A')
      var y = document.getElementById(i.target.id + 'B')
      if (x.style.display === 'none' || x.style.display === '') {
        x.style.display = 'block'
        y.style.webkitTransform = 'rotate(45deg)'
        y.style.margin = '5px 5px 0px 0px'
      } else {
        x.style.display = 'none'
        y.style.webkitTransform = 'rotate(-45deg)'
        y.style.margin = '7px 5px 0px 0px'
      }
    },
    toggleItem (i) {
      var x = document.getElementById(i.target.id + 'A')
      var y = document.getElementById(i.target.id + 'B')

      if (x.style.display === 'none' || x.style.display === '') {
        x.style.display = 'block'
        y.style.webkitTransform = 'rotate(45deg)'
        y.style.margin = '13px 5px 0px 0px'
      } else {
        x.style.display = 'none'
        y.style.webkitTransform = 'rotate(-45deg)'
        y.style.margin = '15px 5px 0px 0px'
      }
    },
    addExample (x, y) {
      this.cards[x].group[y].examples.push({
      })
    },
    saveUpdate (x, y, z) {
      console.log(z)
      db.collection('cards').doc(z).update({
        'age': 13,
        'favorites.color': 'Red'
      })
        .then(function () {
          console.log('Document successfully updated!')
        })
        .catch(function (error) {
          alert('Error updating document: (The document probably doesn\'t exist.: )', error)
        })
    },
    test () {
      console.log('vd')

      db.collection('cards').doc('BdSxtZL8V4S576i2BTRs').update({
        group: fieldValue.arrayUnion({ back: 'bla', front: 'blabla' })
      })
    }
  }
}
</script>

{{card.group_name}
{{card.size}
⋮
{{value.front}}
{{value.back}
⋮
正面
返回
示例+；
示例{i+1}
答复{{i+1}
保存更改
保存新的
页脚

从“/firebaseInit”导入{db，fieldValue}
导出默认值{
名称：“仪表板”，
数据（）{
返回{
卡片：[]，
用户：“kikker”
}
},
创建（）{
db.collection（'cards'）。其中（'user'，'='，this.user）
.get（）
.然后（querySnapshot=>{
querySnapshot.forEach（doc=>{
常数数据={
“id”：doc.id，
“组名称”：doc.data（）.组名称，
“组”：doc.data（）.group，
“大小”：doc.data（）.group.length
}
此.cards.push（数据）
})
})
},
方法：{
切换儿童（一）{
var x=document.getElementById（i.target.id+'A'）
var y=document.getElementById（i.target.id+'B'）
如果（x.style.display=='none'| | x.style.display===''）{
x、 style.display='block'
y、 style.webkitttransform='旋转（45度）'
y、 style.margin='5px 5px 0px 0px'
}否则{
x、 style.display='none'
y、 style.webkitttransform='旋转（-45度）'
y、 style.margin='7px 5px 0px 0px'
}
},
切换项（i）{
var x=document.getElementById（i.target.id+'A'）
var y=document.getElementById（i.target.id+'B'）
如果（x.style.display=='none'| | x.style.display===''）{
x、 style.display='block'
y、 style.webkitttransform='旋转（45度）'
y、 style.margin='13px 5px 0px 0px'
}否则{
x、 style.display='none'
y、 style.webkitttransform='旋转（-45度）'
y、 style.margin='15px 5px 0px 0px'
}
},
加法器示例（x，y）{
this.cards[x]。组[y]。examples.push({
})
},
保存更新（x、y、z）{
console.log（z）
db.收款（'卡片'）.单据（z）.更新({
年龄:13岁,，
“收藏夹.颜色”：“红色”
})
.然后（函数（）{
console.log（'文档已成功更新！'）
})
.catch（函数（错误）{
警报（'更新文档时出错：（文档可能不存在。：'），错误）
})
},
测试（）{
console.log（'vd'）
db.集合（“卡片”）.doc（“BdSxtZL8V4S576i2BTRs”）.更新({
组：fieldValue.arrayUnion（{back'bla'，front'blabla'}）
})
}
}
}

如果我正确理解了您的问题，您应该使用以下方法：“将数组中不存在的每个指定元素添加到（数组的）末尾”。 请参阅中的更多详细信息

为此，您需要：

将您的

firebaseInit.js

文件更改为：

    import firebase from 'firebase'
    import 'firebase/firestore'
    import firebaseConfig from './firebaseConfig'
    firebase.initializeApp(firebaseConfig)

    const db = firebase.firestore();
    const fieldValue = firebase.firestore.FieldValue;

    export { db, fieldValue };

调整组件代码，如下所示：

created () {
    db.collection('cards').where('user', '==', this.user)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const data = {
            'id': doc.id,
            'group_name': doc.data().group_name,
            'group': doc.data().group,
            'size': doc.data().group.length
          }
          this.cards.push(data)
        })
      })
  }

    <script>
    import { db, fieldValue } from './firebaseInit'
    export default {
    name: 'dashboard',
    data () {
        return {
        cards: [],
        user: 'kikker'
        }
    },
    created () {
        db.collection('cards').where('user', '==', this.user)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach(doc => {
            const data = {
                'id': doc.id,
                'group_name': doc.data().group_name,
                'group': doc.data().group,
                'size': doc.data().group.length
            }
            this.cards.push(data)
            })
        })
    },
    methods: {
        //....
        test () {
        console.log('vd')

        db.collection('cards').doc('BdSxtZL8V4S576i2BTRs').update({
            group: fieldValue.arrayUnion({ back: 'bla', front: 'blabla' })
        })

        }
    }
    }
    </script>

从“/firebaseInit”导入{db，fieldValue}
导出默认值{
名称：“仪表板”，
数据（）{
返回{
卡片：[]，
用户：“kikker”
}
},
创建（）{
db.collection（'cards'）。其中（'user'，'='，this.user）
.get（）
.然后（querySnapshot=>{
querySnapshot.forEach（doc=>{
常数数据={
“id”：doc.id，
“组名称”：doc.data（）.组名称，
“组”：doc.data（）.group，
“大小”：doc.data（）.group.length
}
此.cards.push（数据）
})
})
},
方法：{
//....
测试（）{
console.log（'vd'）
db.集合（“卡片”）.doc（“BdSxtZL8V4S576i2BTRs”）.更新({
组：fieldValue.arrayUnion（{back'bla'，front'blabla'}）
})
}
}
}

---

然后，如果您想在前端反映添加的内容，那么Vue.js有许多可能性（重新获取集合、设置侦听器、在写入Firestore的同时将其推送到本地数组，等等）。您需要详细说明您的确切功能要求。

我尝试了一下，但出现了一个错误

firebase未定义

您必须在您的问题中添加所有代码：从Vue.js中的firebase配置到您写入Firestore的方式。您还可以添加

firebaseInit

文件。您需要在那里导出

firebase.firestore.FieldValue

让我们看看。@mk0111000您有时间查看建议的解决方案吗？