Sometimes, we want to watch a deeply nested object with Vue.js.
In this article, we’ll look at how to watch a deeply nested object with Vue.js.
How to watch a deeply nested object with Vue.js?
To watch a deeply nested object with Vue.js, we can use the property path as the key for the watcher method.
For instance, we write
<script>
export default {
//...
watch: {
"block.checkbox.active"() {
this.block.someotherprop.changeme = 5;
},
},
//...
};
</script>
to watch the block.checkbox.active reactive property for changes.
When it changes, we run
this.block.someOtherProp = 5;
to set this.block.someOtherProp to 5.
Conclusion
To watch a deeply nested object with Vue.js, we can use the property path as the key for the watcher method.
