vue.js json 对象数组作为数据

Question

大家好！

我目前正在学习使用vue.js 做事。不幸的是，我被困在自动取款机上。我想做的是向我的示例 API 发送一个请求，该 API 以一个简单的 json 格式对象响应。 我想将此对象作为我的组件中的数据 - 但无论出于何种原因，它似乎都没有这样做。

Ofc 我试图在 stackoverflow 上找到解决方案，但也许我只是盲人，或者这就像其他人编写的代码一样。我什至在 vue 官方网站上找到了this example，但他们正在做和我一样的事情......我猜？

顺便说一句。当我在单独的文件中运行fetchData() 函数时，它确实可以工作，并且我可以访问从我的 API 获得的数据。代码没有变化..只是没有vue。我现在真的很困惑，因为我不知道错误是什么。

代码：

var $persons = [];

在我的组件内部：

data: {

  persons: $persons,
  currentPerson: '',
  modal: false

},


created: function() {

  this.fetchData()

},


methods: {

  fetchData: function () {

    var ajax = new XMLHttpRequest()

    ajax.open('GET', 'http://api.unseen.ninja/data/index.php')
    ajax.onload = function() {
      $persons = JSON.parse(ajax.responseText)
      console.log($persons[0].fname)
    }
    ajax.send()

  }

},

[...]

链接到the complete code

Answer 1

首先，确保onload 回调实际上正在触发。如果 GET 请求导致错误，onload 将不会触发。 （在您的情况下，错误与 CORS 相关，请参阅 @Pradeepb 建议的 this post）。

其次，您需要直接引用persons 数据属性，而不是您初始化persons 时使用的$persons 数组。

看起来像这样（在您的 fetchData 方法中）：

var self = this;
ajax.onload = function() {
  self.persons = JSON.parse(ajax.responseText)
  console.log($persons[0].fname)
}