Greifen Sie auf verschachtelte Objekte in der API zu, indem Sie die Vue-Ressource

Question

verwenden.

Ich beginne gerade mit der vue-Ressource (und Ajax im Allgemeinen) und habe Probleme beim Auflisten eines Arrays, das in meiner API verschachtelt ist.

Wenn dies meine Probe JSON ist:

{ 
    "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", 
    } ] 
} 

ich die item7 Array durch eine Liste in meinem html wie dies passieren soll:

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

Hier ist mein 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[]; 
     }); 
    }, 

    }); 

}; 

Natürlich gibt dies nichts zurück, ich bin mir nicht sicher, wie man das Array durch this.items = data.item7[]; mit Vue-Ressource Schleife.

Answer 1

Sie müssen nur this.items = data.item7 schreiben, keine Notwendigkeit für [].

Sie müssen auch this an die Funktion binden. Wenn Sie sich im Rückruf von der HTTP-Anfrage befinden, bezieht sich this auf etwas anderes. So können Sie .bind(this) wie so verwenden:

this.$http.get('/api/items', function(data) { 
    this.items = data.item7; 
}.bind(this)); 

Schließlich sollten Sie items als Array instanziiert, wenn es ein Array sein wird:

data: { 
    items: [] 
},