vue.set(state.object, key, value) 함수

최근 최신 프론트엔드 프레임워크인 vue.js를 쓰면서 한가지 문제가 생겼다.

바로 변수를 통해 컴포넌트 상태를 업데이트 하려고 했는데,

해당 변수가 배열이 되었을경우 아무리 값을 변경해 보아도 적용이 안 된다는 문제였다.

찾아보니 vue에서는 아직 배열 감지를 하지 못하여 따로 함수를 써줘야 함을 알게 되었다.

함수 이름은 아래와 같다.

Vue.set(state.object, key, value)

해당 함수에 대한 자세한 설명은 아래의 링크를 참고 바란다.

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

그리고 이것을 vue cli의 컴포넌트에 쓰려면 아래와 같이 쓰면 된다.

(참고로 배열은 key 대신에 index를 넣으면 된다.)

this.$set(this.items, index, val)

관련링크는 아래 참고한다.

https://stackoverflow.com/questions/42807888/vuejs-and-vue-set-update-array