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 }}
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)}