如何在firestore中创建一个数组？

Question

在Firebase Firestore中创建数组需要哪些代码？

我要存储userDetails：

  userName: this.userProfile.name,
  userImage: this.userProfile.image,
  userId: this.userProfile.userId

作为Firestore内的数组

Vue组件：

...
data () {
 return {
     postDetails: {
      createdOn: new Date(),
      content: '',
      userId: null,
      image: null,
      comments: 0,
      likes: 0,
      userDetails: []
    }
    userData: [
     { userName: this.userProfile.name },
     { userImage: this.userProfile.image},
     { userId: this.userProfile.userId }
 }
},
methods: {
  createPost () {
    fb.postsCollection.add({
      createdOn: this.postDetails.createdOn,
      content: this.postDetails.content,
      userId: this.currentUser.uid,
      image: this.postDetails.image,
      comments: this.postDetails.comments,
      likes: this.postDetails.likes
      userData: this.userData
    }).then(ref => {
      this.post.content = ''
      this.$router.push('/dashboard')
    }).catch(err => {
      console.log(err)
    })
  }
}

Answer 1

我看到您正在改编此 Firestore 和 Vue.js 教程中的代码：https://savvyapps.com/blog/definitive-guide-building-web-app-vuejs-firebase。

实际上在本教程中 userProfile 数据来自 vue-store

  computed: {
    ...mapState(['userProfile', 'currentUser', 'posts'])
  },

您的问题中缺少这部分代码，但这很可能是您的问题的原因：在您的 Vue.js 组件中，您尝试在数据中使用计算属性，但这不可能“因为组件创建时间：数据评估之前计算属性”。

见Use computed property in data in Vuejs和https://forum.vuejs.org/t/computed-properties-in-data/11231

只需按如下方式直接访问计算属性即可：userData 将存储为数组。

methods: {
  createPost () {
    fb.postsCollection.add({
      createdOn: this.postDetails.createdOn,
      content: this.postDetails.content,
      userId: this.currentUser.uid,
      image: this.postDetails.image,
      comments: this.postDetails.comments,
      likes: this.postDetails.likes
      userData: [
        { userName: this.userProfile.name },
        { userImage: this.userProfile.image},
        { userId: this.userProfile.userId }
      ]
    }).then(ref => {
      this.post.content = ''
      this.$router.push('/dashboard')
    }).catch(err => {
      console.log(err)
    })
  }
}