[Vuejs]-Can $watch listen the props in Vue.js?

by

0👍

Add a deep: true option to your watcher to watch for changes in nested values of an object as below

watch:{
  pass_data:{
    deep: true,
    handler: function(new_obj, old_obj) {
      console.log(new_obj, 'ok')
    }
   }
}

But to add new reactive properties and want the watch to trigger you should use vm.$set(). Refer Reactivity in depth

add_select_data(){
  this.$set(this.pass_data, 'c' , 'c');
  console.log('add c')   // there add the `c`
}

Here the fiddle demonstrating the above example

0👍

If you want your data to be reactive to watch a new property, use this syntax to set it this.$set(this.pass_data, 'c', 'c') , this way it should trigger a change event. Otherwise you can test if the prop is watched by changing this.pass_data.b = 'asd'

https://v2.vuejs.org/v2/guide/reactivity.html

To answer your question, props can be watched just like normal data property

Leave a comment