vue.jsデータオブジェクトとしてのjsonオブジェクト配列

Question

アイフォーンズ！

私は現在、vue.jsで物事をすることを学んでいます。残念ながら、私は気づいていません。私がしたいのは、単純なJSON形式のオブジェクトで応答するサンプルAPIにリクエストを送信することです。 私は、このオブジェクトを自分のコンポーネント内のデータとして持っていますが、何らかの理由でそれを行うようには見えません。

私は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

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) 
}