Vue.js
어레이 변경 감지주의 사항

소개

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');
        }
    }
}) 

여기 에 바이올린 링크가 있습니다.