0
Ich versuche, eine Liste von Objekten in einer JSON-Nutzlast mithilfe von Vue.js in einer Tabelle zu analysieren.Vue JS Fehler bei der Verwendung von v-for zum Abrufen von JSON-Schlüsselwerten aus einem Objektarray
Ich möchte im Array die Schlüssel von dem ersten Objekt ergreifen, um die Tabellenüberschriften, den Code unten Werke zu schaffen, und liefert die richtigen Werte, aber das Problem ist, ich erhalte immer diese Fehlermeldung
die Fehlermeldung
[Vue warn]: Error in render function: "TypeError: objectArray is null"
(found in <Root>)
das HTML-Element
<thead>
<tr>
<th v-for="(value, key) in objectArray[0]">
{{ key }}
</th>
</tr>
</thead>
Die Nutzlast JSON
[
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" },
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" },
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" }
]
Der Vue Code das Objekt
var link = 'api/array';
new Vue ({
el: '#app',
data: {
objectArray: null
},
methods:{
getObjectArray: function(){
this.$http.get(link).then(function(response){
this.objectArray = response.data;
}, function(error){
console.log(error.statusText);
});
}
},
mounted: function() {
this.getObjectArray();
}
});
Die Warnung bedeutet, dass Ihre 'objectArray' -Eigenschaft' null' ist, wenn sie versucht, auf den Index bei '0' zuzugreifen. Laden Sie diese JSON-Daten asynchron? – thanksd
Nein, es wird nicht asynchron geladen. Ich kann die gesamte Liste an der gleichen Stelle ohne Probleme laden. Das Problem tritt nur auf, wenn ich ein Element in diesem zu verwendenden Array anwähle. Wenn ich das Objekt an diesem Index mit {{objectArray [0]}} ausdrucke, gibt es auch keine Fehler – excedion
Können Sie zeigen, wo Sie 'objectArray' einstellen? – thanksd