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.
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)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.