javascript - 如何在 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)
    })
  }
}