How do I watch all keys in a data object in Vue 2
My data object:
data: {
selected: {
\'type\': null,
\'instrument\': null
},
My template:
-
You can use
deepoption 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 } }讨论(0) -
I think you can do this:
watch: { $data: { handler: function(val, oldVal) { console.log(val) }, deep: true } },讨论(0) -
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
$watchwithdeep: 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) }讨论(0)
加载中...
- 热议问题