[vue.js] nested object 에 Observable 데이터 추가하기

data: {      my_object: {} }

 

this.$data.my_object.col1 = "";

this.$data.my_object.col2 = "";

 

위와같이 중첩된 데이터에 컬럼을 추가 하게 되면, my_object 는 Observable 데이터이지만,

col1, col2 는 Observable 데이터가 아니다.

콘솔 로그로 확인해보면,

$data 를 확인해보면, my_object 는 observer 로 되어 있는걸 확인할 수 있다.

get my_object / set my_object 라는 property 가 자동으로 생성이 된것이다.

하지만, my_object 를 펼쳐보면, col1, col2 에는 아무것도 없다.

즉, col1, col2 는 vue 의 반응형 데이터로 동작하지 않는다는 것이다.

nested object 에 반응형 데이터를 추가하기 위해서, Vue.set 문장으로 바꾸어 보자.

Vue.set(this.$data.my_object, 'col1', '');

Vue.set(this.$data.my_object, 'col2', '');

 

다시, 콘솔 로그로 확인해보자.

my_object 안에 col1, col2 모두 observable 데이터로 등록이 된것을 확인할 수 있다.