Vue.js
Предостережения об изменении размера массива

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript

Вступление

Когда вы пытаетесь установить значение элемента в определенном индексе массива, инициализированного в параметре данных, 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');
        }
    }
})

Вот ссылка на jsfiddle

Массив объектов, содержащих массивы

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