Vue.js
Arrayändringsdetektering
Sök…
Introduktion
När du försöker ställa in ett värde på ett objekt vid ett visst index för en matris initierad i datalternativet, kan vue inte upptäcka förändringen och utlöser inte en uppdatering till staten. För att övervinna detta varumärke bör du antingen använda Vue's Vue. $ Set eller använda Array.prototype.splice-metoden
Med Vue. $ Set
I din metod eller någon livscykelkrok som ändrar arrayobjektet vid det specifika indexet
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');
}
}
})
Här är länken till fiolen
Använda Array.prototype.splice
Du kan utföra samma förändring istället för att använda Vue.$set med Array-prototypens splice()
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 kapslad matris
Om du har kapslad matris kan följande göras
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Här är länken till jsfiddle
Array av objekt som innehåller matriser
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');
}
}
})
Här är länken till fiolen
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow
