Vue.js
Las advertencias de detección de cambio de matriz
Buscar..
Introducción
Cuando intenta establecer un valor de un elemento en un índice particular de una matriz inicializada en la opción de datos, vue no puede detectar el cambio y no desencadena una actualización al estado. Para superar esta advertencia, debe usar Vue. $ Set o usar el método Array.prototype.splice.
Usando Vue. $ Set
En su método o en cualquier gancho de ciclo de vida que cambie el elemento de la matriz en el índice particuar
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');
}
}
})
Aquí está el enlace al violín.
Usando Array.prototype.splice
Puede realizar el mismo cambio en lugar de usar Vue.$set utilizando el splice() del prototipo 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');
}
}
})
Para matriz anidada
Si tiene una matriz anidada, se puede hacer lo siguiente
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Aquí está el enlace al jsfiddle
Array de objetos que contienen arrays
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');
}
}
})
Aquí está el enlace al violín.
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow