Vue.js
어레이 변경 감지주의 사항
수색…
소개
데이터 옵션에서 초기화 된 배열의 특정 색인에 항목 값을 설정하려고하면 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');
}
}
})
배열을 포함한 객체의 배열
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