Vue.js
De array-wijziging detectie-voorbehouden
Zoeken…
Invoering
Wanneer u probeert een waarde van een item in te stellen op een bepaalde index van een array die is geïnitialiseerd in de gegevensoptie, kan vue de wijziging niet detecteren en wordt geen update van de status geactiveerd. Om dit voorbehoud te overwinnen, moet je de Vue. $ Set van vue gebruiken of de methode Array.prototype.splice gebruiken
Met behulp van. $ Set
In uw methode of een andere levenscyclushaak die het matrixitem op bepaalde index wijzigt
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 is de link naar de viool
Array.prototype.splice gebruiken
U kunt dezelfde wijziging uitvoeren in plaats van Vue.$set gebruiken met de splice() van het array-prototype 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');
}
}
})
Voor geneste array
Als yoi een array heeft genest, kan het volgende worden gedaan
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Hier is de link naar de jsfiddle
Array van objecten die arrays bevatten
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 is de link naar de viool
Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow