Sometimes, we want to use $watch
on an array of objects with Vue.js.
In this article, we’ll look at how to use $watch
on an array of objects with Vue.js.
How to use $watch on an array of objects with Vue.js?
To use $watch
on an array of objects with Vue.js, we can call add a watcher with the deep
option set to true
.
For instance, we write
<script>
//...
export default {
//...
watch: {
things: {
handler(val, oldVal) {
//...
},
deep: true,
},
},
//...
};
</script>
to watch the things
array reactive property for changes.
We set the deep
option to true
to watch all nested content in the array for changes.
And then we get the latest value for things
in val
and the previous value of it with oldVal
.
Conclusion
To use $watch
on an array of objects with Vue.js, we can call add a watcher with the deep
option set to true
.