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

我目前正在學習做與vue.js的東西。不幸的是我卡在atm。我想要做的是發送一個請求到我的示例API，它用一個簡單的json格式化對象進行響應。我想將這個對象作爲我的組件中的數據 - 但似乎無論如何都是這樣做的。

Ofc我試圖找到一個解決方案在stackoverflow但也許我只是失明或這就像其他人寫的代碼。我甚至在官方的vue網站上發現了this example，但他們做的和我一樣......我猜？

btw。當我在一個單獨的文件中運行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

來源

2017-09-05 Andreas Grafen

首先，請確保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) 
}

來源

2017-09-05 13:31:39 thanksd

我以前這樣嘗試過，但它不工作。我仍然沒有輸出。我認爲ajax.onload函數甚至不會觸發。（添加了一些consolte日誌，並且該函數內部沒有顯示。） –

您確定'ajax.responseText'是有效的JSON嗎？ – thanksd

@AndreasGrafen你確定以上建議不起作用嗎？檢查這[out]（https://jsfiddle.net/ph7w4j4h/）。它工作正常。如果您發現它無法正常工作，那麼您必須在網絡選項卡中收到一些錯誤。 – Pradeepb

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

回答

相關問題