vueリソースを使用してAPI内のネストされたオブジェクトにアクセスする

Question

vueリソース（とajax一般）から始めています。APIにネストされた配列のリストを表示できません。

これは私のサンプルJSONの場合：

{ 
    "item1" : "data", 
    "item2" : 1234, 
    "item3" : 5678, 
    "item6" : "data", 
    "item7" : [ { 
    "id" : 0, 
    "data2" : "testdata", 
    "data3" : "testdata", 
    },{ 
    "id" : 2, 
    "data2" : "testdata", 
    "data3" : "testdata", 
    },{ 
    "id" : 3, 
    "data2" : "testdata", 
    "data3" : "testdata", 
    } ] 
} 

私はこのように私のhtmlでリストをitem7配列を渡したい：

<div id="app"> 
    <ul v-for="item in items"> 
     <li>{{ item.data2 }} {{ item.data3 }}</li> 
    </ul> 
</div> 

は、ここに私のJSです：

window.onload = function() { 

    new Vue({ 
    el: '#app', 
    data: { 
     items: {} 
    }, 
    ready: function() { 
     this.$http.get('/api/items', function(data) { 
     console.log(data); 
     this.items = data.item7[]; 
     }); 
    }, 

    }); 

}; 

これは当然、何も返されません。私は、012ueでvueリソースを使って配列をループする方法がわかりません。

Answer 1

this.items = data.item7と書く必要があります。[]は不要です。

また、関数にthisをバインドする必要があります。 HTTPリクエストからコールバックすると、thisは他のものを参照します。だから、あなたはそうのような.bind(this)を使用することができます。この作品

data: { 
    items: [] 
},