1
Ich habe eine einfache Vue-Vorlage, bestehend aus einem Objekt mit zwei Arrays (Dummy/Platzhalter vs tatsächliche Daten).Vue - Ändern von Modell-Arrays
data() {
var tableColumns = new Array();
tableColumns.push({"dummyValues": ["date 1", "date 2"], "csvValues": []});
var variables = {
"tableColumns": tableColumns
};
return variables;
}
<td v-for="(item, key, index) in tableColumns">
<span v-if="item.csvValues.length == 0" v-for="dummyValue in item.dummyValues">
{{dummyValue}} <br />
</span>
<span v-else v-for="value in item.csvValues">
{{value}} <br />
</span>
</td>
Zuerst habe ich nur Dummy-Werte. Etwas passiert auf dem Weg (Ich analysiere eine CSV-Datei) und ich muss die Dummy-Daten, die ich zuerst gerendert habe, mit den tatsächlichen Werten austauschen. Ich füge also meine realen Daten an das reale Datenfeld an (csvValues) und hoffe, dass die v-else sich darum kümmern wird.
Dies funktioniert nicht - warum, ist meine Vorgehensweise falsch?
Versuchen [ 'Vue.set'] mit (https://vuejs.org/v2/api/ # Vue-set) – Phil
Ihre Syntax/Verwendung des Datenteils scheint merkwürdig, definieren Sie hier keine Logik. Definieren Sie tableColumns wie folgt tableColomns: [], verschieben Sie als nächstes den Push-Part in eine Methode und rufen Sie sie zum Beispiel auf eingehängt auf. –
@M.Suurland Es gibt keine Logik in meiner Methode data(), es gibt ein einfaches Array zurück. Das Problem besteht nicht darin, die Anfangsdaten anzuzeigen, sondern das Modell nachträglich zu modifizieren - die Änderungen werden nicht berücksichtigt. Ich kann die Daten beim Debuggen mit Chrome oder der Vue-Erweiterung überprüfen, die neuen Elemente sind vorhanden, aber sie werden nicht gerendert. Ich bekomme nur "undefiniert" für jeden von ihnen. – Buffalo