Vue.js에서 배열이나 오브젝트의 v-for은 정말 짜증나는 관계가 아닐 수가 없습니다.
Vue.js 2를 기준으로, 배열이나 오브젝트는 감시가 불가능합니다.
그리고 이는 매우 더러운 코드를 양산하게 되는 이유가 됩니다.
배열이나 오브젝트의 감시를 위해서는 Vue.set(vm.$set) 또는 array.splice를 반드시 써야합니다.
안 쓰면 감시가 안됩니다.
한마디로, v-for을 사용할 때, v-for의 데이터를 바꾸는 일이 생긴다면, 반드시 주의해야할 부분입니다.
단순히 this.oldValue = newValue;로는 절대로 리 랜더링이 되지 않습니다.
다행이도 Vue.js 3.0에는 객체 감시 시스템을 바꿔서 된다고는 하니, Vue.js 3.0을 기다리는 수 밖에 없습니다.
반응형
'Web Programming > JavaScript & TypeScript' 카테고리의 다른 글
빈 배열 여부를 체크하는 함수 (0) | 2018.12.19 |
---|---|
자바스크립트 배열 중복 제거 (JavaScript duplicate array) (0) | 2018.12.17 |
자바스크립트 날짜 한글로 표시 (0) | 2018.10.15 |
자바스크립트에서 0 이상 10 미만이면 0붙이기 (0) | 2018.10.15 |
webpack-cli와 webpack-command의 차이(번역) (0) | 2018.08.03 |