Vue.js
Die Array-Änderungswarnung ist zu beachten
Suche…
Einführung
Wenn Sie versuchen, einen Wert eines Elements an einem bestimmten Index eines Arrays festzulegen, das mit der Datenoption initialisiert wurde, kann vue die Änderung nicht erkennen und löst keine Aktualisierung des Status aus. Um diesen Nachteil zu umgehen, sollten Sie entweder Vue. $ Set von vue oder die Methode Array.prototype.splice verwenden
Verwendung von Vue. $ Set
In Ihrer Methode oder einem beliebigen Lebenszyklus-Hook, der das Arrayelement am jeweiligen Index ändert
new Vue({
el: '#app',
data:{
myArr : ['apple', 'orange', 'banana', 'grapes']
},
methods:{
changeArrayItem: function(){
//this will not work
//myArr[2] = 'strawberry';
//Vue.$set(array, index, newValue)
this.$set(this.myArr, 2, 'strawberry');
}
}
})
Hier ist der Link zur Geige
Array.prototype.splice verwenden
Sie können dieselbe Änderung anstelle von Vue.$set mithilfe des splice() des Array-Prototyps
new Vue({
el: '#app',
data:{
myArr : ['apple', 'orange', 'banana', 'grapes']
},
methods:{
changeArrayItem: function(){
//this will not work
//myArr[2] = 'strawberry';
//Array.splice(index, 1, newValue)
this.myArr.splice(2, 1, 'strawberry');
}
}
})
Für verschachteltes Array
Wenn Sie ein verschachteltes Array haben, können Sie Folgendes tun
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Hier ist der Link zum jsfiddle
Array von Objekten, die Arrays enthalten
new Vue({
el: '#app',
data:{
myArr : [
{
name: 'object-1',
nestedArr: ['apple', 'banana']
},
{
name: 'object-2',
nestedArr: ['grapes', 'orange']
}
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1].nestedArr, 1, 'strawberry');
}
}
})
Hier ist der Link zur Geige
Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow