Categories
Vue Answers

How to use $watch on an array of objects with Vue.js?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *