javascript - 在 vue 中的 Promise 中传递数据

Question

我最近开始使用 Vue 2 并使用 Pexels API 开发一个小项目。我正在尝试调用 API 以获取一些图像 URL 以加载到数据对象中的属性中。但是，我无法将数据属性传递到回调中。我认为我的代码可以更好地解释事情。这是整个 Vue 实例:

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

当我console.log(this.count)时出现错误消息:

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

我尝试阅读大量有关此问题的文章并查看其他帖子，但找不到任何对我有帮助的内容。我承认 promise 对我来说是一个非常令人困惑的话题。任何帮助都会很棒。最终，我想将每个图像 URL 推送到 this.pics 数组中，然后将它们显示在页面上。再次强调，任何帮助都会很棒。

Answer 1

您不能使用 this 来引用函数作用域内的 vm 实例，除非您使用箭头表示法，如下所示:

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