How to create an Array inside firestore?

Question

Which code do I need to create an Array in Firebase Firestore?

I want to store userDetails:

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

as an Array inside Firestore

Vue component:

...
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)
    })
  }
}

You already have two arrays in your document: tags and userData. It's not clear at all to me what problem you're running into. — Doug Stevenson, Aug 07 '18 at 21:48
yes, but I added the both manually inside the firebase console — Lukas, Aug 07 '18 at 21:59
Have you tried actually putting a JavaScript array populated with some data into your code? — Doug Stevenson, Aug 07 '18 at 22:00
What part of your code is actually adding a populated array? I don't see it. I just see an empty array. — Doug Stevenson, Aug 07 '18 at 22:05
The updated code should create an array called `userData` in the firebase Collection but I get errors — Lukas, Aug 07 '18 at 22:11

Renaud Tarnec · Accepted Answer · 2018-08-08T08:04:31.090

I see that you are adapting the code from this Firestore and Vue.js tutorial: https://savvyapps.com/blog/definitive-guide-building-web-app-vuejs-firebase.

Actually in this tutorial the userProfile data is coming from the vue-store with

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

This part of the code is missing in your question but it is most probably the cause of your problem: In your Vue.js component, you try to use computed properties in data but this is not possible "because of component creation timing: data evaluates before computed properties".

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

Just access directly the computed properties as follows, and it will work: userData will be stored as an array.

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)
    })
  }
}

thanks but why is this not working: ´ userData: [ { userName: this.userProfile.name, userImage: this.userProfile.image, userId: this.currentUser.userId } ]´ — Lukas, Aug 08 '18 at 08:43
Depending on where you are in the tutorial the value of `userImage` and `name` may be undefined. Try with only `userId: this.currentUser.userId` — Renaud Tarnec, Aug 08 '18 at 08:45
I found the mistake, it won't work with the `currentUser´, only with userProfile — Lukas, Aug 08 '18 at 08:49

How to create an Array inside firestore?

1 Answers1