如何通过请求在 VueJS 应用程序中显示数据？

Question

我这样做是为了尝试使用 Vue.js 在页面中呈现数据，但它不起作用。

来自控制台的错误："Property or method 'PROPERTY_NAME' is not defined on the instance but referenced during render."

*"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 in 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')
  });
}

如何通过请求在 VueJS 应用程序中显示数据？

How to show data in a VueJS app through request?

api

render

request

vue.js