随心所欲地传递数据

时间:2018-12-08 19:19:14

标签: javascript vue.js callback promise vuejs2

我最近开始使用Vue 2,并使用Pexels API从事一个小项目。我正在尝试调用API以获取一些图像URL,以将其加载到数据对象的属性中。但是,我无法将data属性传递给回调。我认为我的代码可能会更好地解释事情。这是整个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)时出现错误消息:

  

未捕获(承诺)TypeError:无法读取未定义的属性“ count”

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

1 个答案:

答案 0 :(得分:0)

除非使用箭头符号,否则不能使用__next__来引用函数范围内的vm实例,

this