"blogItems" is undefined when trying to push update to vue data variable

Question

I'm trying to get all the posts from firebase and add them to an array but am getting the error:

Uncaught (in promise) TypeError: Cannot read property 'blogItems' of undefined

here is the script:

  export default {
    data(){
      return{
        blogItems: []
      }
    },
    mounted(){
      this.getPosts();
    },
    methods:{

      getPosts(){

        database.collection('blog').doc('yP6aYXvisFbTsqtQ3MEfuyz6xYE3').collection('posts').get().then(snapshot =>{

          const posts = snapshot.docs.map(doc => doc.data())
          posts.forEach(function(post){
            this.blogItems.push(post.content)
          })
        })
        
      },

    }

  }

please check this answer https://stackoverflow.com/a/53730095/8172857 — Boussadjra Brahim, Jul 03 '21 at 20:37

score 1 · Accepted Answer · answered Jul 03 '21 at 20:42

In your case the this in this.blogItems to posts.

You have two ways to resolve this

store the this to a variable and use it

getPosts(){
  let tis = this;

 database.collection('blog').doc('yP6aYXvisFbTsqtQ3MEfuyz6xYE3').collection('posts').get().then(snapshot =>{

   const posts = snapshot.docs.map(doc => doc.data())
   posts.forEach(function(post){
     tis.blogItems.push(post.content)
   })
 })

 },

Using the Arrow functions

 getPosts(){

 database.collection('blog').doc('yP6aYXvisFbTsqtQ3MEfuyz6xYE3').collection('posts').get().then(snapshot =>{

   const posts = snapshot.docs.map(doc => doc.data())
   posts.forEach((post) => {
     this.blogItems.push(post.content)
   })
 })

 },

"blogItems" is undefined when trying to push update to vue data variable

1 Answers1