Javascript 在vue中以承诺方式传递数据
我最近开始使用Vue 2,并使用Pexels API处理一个小项目。我试图调用API以获取一些图像URL,以便加载到数据对象中的属性中。但是,我无法将数据属性传递到回调中。我认为我的代码可以更好地解释事情。以下是整个Vue实例:Javascript 在vue中以承诺方式传递数据,javascript,vue.js,callback,promise,vuejs2,Javascript,Vue.js,Callback,Promise,Vuejs2,我最近开始使用Vue 2,并使用Pexels API处理一个小项目。我试图调用API以获取一些图像URL,以便加载到数据对象中的属性中。但是,我无法将数据属性传递到回调中。我认为我的代码可以更好地解释事情。以下是整个Vue实例: export default { name: 'Gallery', data() { return { pics: [1,2], count: 100 } }, mounted() { console.lo
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
I console.logthis.count时出现错误消息:
承诺类型错误中未捕获:无法读取未定义的属性“count”
我试着读了很多关于这件事的文章,并查看了其他帖子,却找不到任何对我有帮助的东西。我承认承诺对我来说是一个非常令人困惑的话题。任何帮助都会很好。最后,我想将每个图像URL推送到this.pics数组中,然后在页面上显示它们。同样,任何帮助都将非常有用。除非使用箭头符号,否则不能使用它来引用函数范围内的vm实例,如下所示:
pexelsClient.getPopularPhotos(10, 1)
.then((result) => {
console.log(this.count)
}
可能重复的