Vue.js
L'array modifica le avvertenze sul rilevamento
Ricerca…
introduzione
Quando si tenta di impostare un valore di un elemento in un determinato indice di un array inizializzato nell'opzione dati, Vue non può rilevare la modifica e non attiva un aggiornamento allo stato. Per superare questa avvertenza dovresti utilizzare Vue di vue. $ Set o usare il metodo Array.prototype.splice
Usando Vue. $ Set
Nel metodo o in qualsiasi hook del ciclo di vita che modifica l'elemento dell'array in un indice particolare
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');
}
}
})
Ecco il link al violino
Utilizzando Array.prototype.splice
È possibile eseguire la stessa modifica anziché utilizzare Vue.$set utilizzando la splice() del prototipo di Array 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');
}
}
})
Per matrice nidificata
Se hai una matrice annidata, puoi fare quanto segue
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Ecco il link al jsfiddle
Matrice di oggetti contenenti matrici
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');
}
}
})
Ecco il link al violino
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow