如何通过请求在 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');
    });
  }
});

（如果我将对象直接放在“数据”上，它可以正常工作，但它需要来自外部 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

then block 中的this 不是 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')
  });
}