[컴] vuejs에서 object 를 watch 하는 법

vuejs / vue.js / 뷰js/ 데이터 watch / array watch /

vuejs에서 object 를 watch 하는 법

보통 단순한 값들은 아래처럼 data 를 watch 를 할 수 있다.

props: ['yourProp'],
data: {
    yourPropChanged: false
},
watch: {
    yourProp (val, oldVal) {
        if (val !== oldVal) this.yourPropChanged = true
    }
}

그런데 ‘yourProp’ 의 값이 object 인 경우는 아래처럼 해줘야 한다. 아래처럼 해주지 않으면, watch가 안된다.(watch 에 정의한 function 을 호출하지 않는다.)

props: ['yourProp'],
data() {
    return {
       myobject: {
          prop1: "a",
          prop2: "b",
       }    
    }
 },
watch: {
    yourProp: {
        handler(newVal, oldVal) {
            // do something with the object
        },
        deep: true,
    },
},

한개의 값만을 watch 하려 할때는 아래처럼 하면 된다.

watch: { 
    'myobject.prop1' : function(newVal, oldVal) { 
        // do something here 
     }
}

See Also

1. javascript - Redraw Highcharts on Vuejs app - Stack Overflow : vue component 가 아닌 chart 에서 redraw 를 호출하는 방식

References

1. javascript - Vue JS Watching deep nested object - Stack Overflow