Vue.js
Предостережения об изменении размера массива
Поиск…
Вступление
Когда вы пытаетесь установить значение элемента в определенном индексе массива, инициализированного в параметре данных, vue не может обнаружить изменение и не вызывает обновление состояния. Чтобы преодолеть это предостережение, вы должны либо использовать vue vue. $ Set, либо использовать метод Array.prototype.splice
Использование Vue. $ Set
В вашем методе или любом крючке жизненного цикла, который изменяет элемент массива в определенном индексе
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');
}
}
})
Использование Array.prototype.splice
Вы можете выполнить одно и то же изменение вместо использования Vue.$set
с использованием splice()
прототипа 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');
}
}
})
Для вложенного массива
Если yoi имеет вложенный массив, можно сделать следующее:
new Vue({
el: '#app',
data:{
myArr : [
['apple', 'banana'],
['grapes', 'orange']
]
},
methods:{
changeArrayItem: function(){
this.$set(this.myArr[1], 1, 'strawberry');
}
}
})
Массив объектов, содержащих массивы
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');
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow