How do I watch all keys in a data object in Vue 2 How do I watch all keys in a data object in Vue 2 vue.js vue.js

How do I watch all keys in a data object in Vue 2


You can use deep option provided by the watcher from vue. As stated in the docs:

To also detect nested value changes inside Objects, you need to pass in deep: true in the options argument. Note that you don’t need to do so to listen for Array mutations.

You code will look like following:

watch: {    'selected': {        handler: function (val, oldVal) {            console.log('watch 1', 'newval: ', val, '   oldVal:', oldVal)        },        deep: true    }}


I think you can do this:

watch: {    $data: {        handler: function(val, oldVal) {            console.log(val)        },        deep: true    }},


watch: {  'selected.type': function (newSelectedType) {    console.log(newSelectedType)  },  'selected.instrument': function (newSelectedinstrument) {    console.log(newSelectedinstrument)  }}

If you are just trying to calculate a new data from selected, you can just use computed properties, since the data of Vue are reactive, the computed properties can also detect the changes of data.


If you want to use a single function to watch the entire object, you can use $watch with deep: true:

mounted () {  this.$watch('$data.selected', this.onSelectedUpdate, { deep: true })}

note that '$data.selected' is a string, Vue will parse it.

and in your methods:

onSelectedUpdate (newSelected) {  console.log(newSelected)}