Vue에서 Data 변화가 감지되지(Reactive state)않는 경우

#. Vue에서 v-if나 v-model등으로 출력중인 데이터가 변할경우 새로 바뀐 값이 바로바로 적용되어 진다 하지만 적용이 안되는 경우가 있다.

(https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)

- Vue Class내 Data 항목에 감시하고자 하는 데이타항목을 할당해 준다.

- Object나 Array의 내부항목이 변경될 경우 감지가 되지 않는다.

- Vue.set(object, propertyName, value) (or vm.$set)

- Vue.set(vm.items, indexOfItem, newValue)(or vm.$set)

으로 적용하거나

전체 Object나 Array 를 교체하여 적용시킨다

 

참고

• https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules
• https://stackoverflow.com/questions/45910571/vuex-getter-not-updating-value-after-an-array-update
• https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
• https://stackoverflow.com/questions/42678983/vue-js-computed-property-not-updating
• Always return a new array : https://vuejs.org/v2/guide/list.html#Maintaining-State