Недавно я начал работать с Vue 2 и работал над небольшим проектом с использованием API Pexels. Я пытаюсь вызвать API, чтобы получить URL-адреса изображений для загрузки в свойство в объекте данных. Однако я не могу передать свойство данных в обратный вызов. Я думаю, что мой код может лучше объяснить ситуацию. Вот весь экземпляр Vue:
export default {
name: 'Gallery',
data() {
return {
pics: [1,2],
count: 100
}
},
mounted() {
console.info(this.count) //I can see this value
console.info(this.pics) //I can also see this value
let test = this.count;
pexelsClient.getPopularPhotos(10, 1)
.then(function(result){
console.info(test); //This will allow me to see the value
console.info(this.count) // This gets me an error message see below.
console.info(result.photos[0].url);
return result;
})
}//End of mounted function
}//End of Vue instance
Сообщение об ошибке, когда я console.info(this.count):
Uncaught (in promise) TypeError: Cannot read property 'count' of undefined
Я пытался прочитать множество статей по этому поводу, просмотрел другие сообщения и не нашел ничего, что могло бы мне помочь. Признаюсь, обещания - очень запутанная тема для меня. Любая помощь будет отличной. В конце концов, я хотел бы поместить URL каждого изображения в массив this.pics, а затем отобразить их на странице. Опять же, любая помощь будет отличной.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы не можете использовать this для ссылки на экземпляр vm внутри области действия функции, если вы не используете нотацию стрелок, например:
pexelsClient.getPopularPhotos(10, 1)
.then((result) => {
console.info(this.count)
}
Возможный дубликат stackoverflow.com/questions/20279484/…