サーチ…


前書き

データオプションで初期化された配列の特定のインデックスに項目の値を設定しようとすると、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の使用

Arrayプロトタイプのsplice()を使用してVue.$setを使用する代わりに、同じ変更を行うことができますVue.$set

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