Передача данных в обещании в vue

Недавно я начал работать с 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, а затем отобразить их на странице. Опять же, любая помощь будет отличной.

Возможный дубликат stackoverflow.com/questions/20279484/…

Boussadjra Brahim 08.12.2018 20:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
884
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете использовать this для ссылки на экземпляр vm внутри области действия функции, если вы не используете нотацию стрелок, например:

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

Другие вопросы по теме