vue.js json 對象數組作為數據

Question

是的，伙計們！

我目前正在學習用vue.js 。 不幸的是，我被困在自動取款機上。 我想做的是向我的示例 API 發送一個請求，該 API 以一個簡單的 json 格式對象響應。 我想把這個對象作為我的組件中的數據——但無論出於何種原因，它似乎都沒有這樣做。

Ofc 我試圖在 stackoverflow 上找到解決方案，但也許我只是盲目的，或者這就像其他人寫的代碼一樣。 我什至在 vue 官方網站上找到了這個例子，但他們和我做的一樣……我猜？

順便提一句。 當我在單獨的文件中運行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()

  }

},

[...]

鏈接到完整代碼

Answer 1

首先，確保onload回調實際上正在觸發。 如果 GET 請求導致錯誤，則不會觸發onload 。 （在您的情況下，該錯誤與 CORS 相關，請參閱@Pradeepb 建議的這篇文章）。

其次，您需要直接引用 people 數據屬性，而不是用於初始化persons的$persons persons 。

它看起來像這樣（在您的fetchData方法中）：

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