Ich bin neu bei Vuejs. Etwas gemacht, aber ich weiß nicht, dass es der einfache / richtige Weg ist.
was ich möchte
Ich möchte einige Daten in einem Array haben und sie bei einem Ereignis aktualisieren. Zuerst habe ich Vue.set ausprobiert, aber es klappt nicht. Jetzt nach dem Ändern meines Array-Elements:
this.items[index] = val;
this.items.push();
Ich drücke () nichts auf das Array und es wird aktualisiert. Aber manchmal wird das letzte Element irgendwie versteckt ... Ich denke, diese Lösung ist ein bisschen hackig, wie kann ich es stabil machen?
Einfacher Code ist hier:
new Vue({
el: '#app',
data: {
f: 'DD-MM-YYYY',
items: [
"10-03-2017",
"12-03-2017"
]
},
methods: {
cha: function(index, item, what, count) {
console.log(item + " index > " + index);
val = moment(this.items[index], this.f).add(count, what).format(this.f);
this.items[index] = val;
this.items.push();
console.log("arr length: " + this.items.length);
}
}
})
ul {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
<ul>
<li v-for="(index, item) in items">
<br><br>
<button v-on:click="cha(index, item, 'day', -1)">
- day</button>
{{ item }}
<button v-on:click="cha(index, item, 'day', 1)">
+ day</button>
<br><br>
</li>
</ul>
</div>
quelle
BEARBEITEN 2
Vue.set(object, prop, value)
BEARBEITEN 1
Für vuex möchten Sie tun
Vue.set(state.object, key, value)
Original
Also nur für andere, die zu dieser Frage kommen. Es erscheint irgendwann in Vue 2. * Sie haben
this.items.$set(index, val)
zugunsten von entferntthis.$set(this.items, index, val)
.Splice ist weiterhin verfügbar und hier ist ein Link zu Array-Mutationsmethoden, die in vue link verfügbar sind .
quelle
Wie bereits erwähnt, kann VueJS diese Operationen einfach nicht verfolgen (Zuweisung von Array-Elementen). Alle Operationen, die von VueJS mit Array verfolgt werden, sind hier . Aber ich werde sie noch einmal kopieren:
Während der Entwicklung stößt man auf ein Problem - wie man damit lebt :).
push (), pop (), shift (), unshift (), sort () und reverse () sind ziemlich einfach und helfen Ihnen in einigen Fällen, aber der Hauptfokus liegt auf splice () , wodurch Sie das Array effektiv ändern können das würde von VueJs verfolgt werden. So kann ich einige der Ansätze teilen, die am häufigsten für Arrays verwendet werden.
Sie müssen Item in Array ersetzen:
Hinweis: Wenn Sie nur ein Elementfeld ändern müssen, können Sie dies einfach tun, indem Sie:
Und dies würde von VueJS verfolgt, wenn die Elementfelder (Objektfelder) verfolgt würden.
Sie müssen das Array leeren:
Mit dieser Funktion können Sie tatsächlich viel mehr tun. Splice () - w3schools link Sie können mehrere Datensätze hinzufügen, mehrere Datensätze löschen usw.
Vue.set () und Vue.delete ()
Vue.set () und Vue.delete () können zum Hinzufügen von Feldern zu Ihrer UI-Version von Daten verwendet werden. Beispielsweise benötigen Sie einige zusätzliche berechnete Daten oder Flags in Ihren Objekten. Sie können dies für Ihre Objekte oder eine Liste von Objekten (in der Schleife) tun:
Senden Sie bearbeitete Daten im selben Format an das Back-End zurück, bevor Sie Axios aufrufen:
quelle
Eine Alternative - und eine leichtere Herangehensweise an Ihr Problem - könnte darin bestehen, das Array nur vorübergehend zu bearbeiten und dann das gesamte Array wieder Ihrer Variablen zuzuweisen. Da Vue keine einzelnen Elemente überwacht, wird die gesamte Variable aktualisiert.
Also sollte dies auch funktionieren:
Dies sollte dann auch Ihr DOM aktualisieren.
quelle