CODEWITHSUNDEEP
javascriptvue.jscallbackpromisevuejs2
ravenUSMC
ravenUSMC

Reputation: 517

Passing data in a promise in vue

I've recently started to work with Vue 2 and working on a small project with using the Pexels API. I'm trying to make a call to the API to get some image URLs to load up into a property in the data object. However, I cannot pass the data property into the call back. I think my code may explain things better. Here is the entire Vue instance:

export default {
  name: 'Gallery',
  data() {
    return {
      pics: [1,2],
      count: 100
    }
  },
  mounted() {
    console.log(this.count) //I can see this value
    console.log(this.pics) //I can also see this value 
    let test = this.count; 
    pexelsClient.getPopularPhotos(10, 1)
        .then(function(result){
          console.log(test); //This will allow me to see the value 
          console.log(this.count) // This gets me an error message see below.
          console.log(result.photos[0].url);
          return result;
      })
   }//End of mounted function
  }//End of Vue instance

Error message when I console.log(this.count):

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

I've tried to read numerous articles on this matter and looked at other posts and cannot find anything that helps me. I will admit that promises are a very confusing topic for me. Any help will be great. Eventually, I would like to push each image URL into the this.pics array and then display them on the page. Again, any help will be great.

Upvotes: 0

Views: 1658

Answers (1)

piscator
piscator

Reputation: 8709

You can not use this to reference the vm instance inside the scope of a function, unless you use arrow notation, like this:

pexelsClient.getPopularPhotos(10, 1)
    .then((result) => {
    console.log(this.count) 
}

Upvotes: 1

Related Questions