Как показать данные в приложении VueJS через запрос?

Question

Я сделал это, чтобы попытаться отобразить данные на странице с помощью Vue.js, но это не работает.

Ошибка консоли: «Свойство или метод 'PROPERTY_NAME' не являетсяопределено в экземпляре, но на него ссылаются во время рендеринга. "

* Функция" get "происходит из Fetch API, который используется в проекте.Не хотел добавлять AXIOS, рекомендуемый Vue.

var app6 = new Vue({
  el: "#my-id",
  data: null,
  mounted: function() {
    get('http://www.mocky.io/v2/5c7fd404330000c6378483fe')
    .then(function(response){
      this.data = response;
      console.log('success');
    }).catch(function(){
      console.log('error');
    });
  }
});

(если я помещаю объект непосредственно в «data», он работает нормально, но должен исходить из внешнего API)

var app6 = new Vue({
  el: "#detalle-equipos",
  data: {
    "producttitle": "iPhone XR",
    "productcolor": "red",
    "productcapacity": "64GB",
    "slides": [
      {
        "src":"../../assets/resources/images/smartphone1.jpg",
        "alt":"smartphone 1",
      },
      {
        "src":"../../assets/resources/images/smartphone2.jpg",
        "alt":"smartphone 2",
      },
      {
        "src":"../../assets/resources/images/smartphone3.jpg",
        "alt":"smartphone 3",
      },
      {
        "src":"../../assets/resources/images/smartphone4.jpg",
        "alt":"smartphone 4",
      },
    ]
  },
  mounted: function() {
    get('http://www.mocky.io/v2/5c7fd404330000c6378483fe')
    .then(function(response){
      this.data = response
      console.log('success')
    }).catch(function(){
      console.log('error')
    });
  }
});

Ну помогите ...

Answer 1

this в then block не является экземпляром Vue.Вы можете использовать функцию стрелки

mounted: function() {
  get('http://www.mocky.io/v2/5c7fd404330000c6378483fe')
  .then((response) => {
    this.slides = response.ATTslides
    this.producttitle = response.ATTproducttitle

  }).catch(function(){
    console.log('error')
  });
}