Categories
Vue Answers

How to properly watch for nested data with Vue.js?

Spread the love

Sometimes, we want to properly watch for nested data with Vue.js.

In this article, we’ll look at how to properly watch for nested data with Vue.js.

How to properly watch for nested data with Vue.js?

To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.

For instance, we write

new Vue({
  el: "#myElement",
  data: {
    entity: {
      properties: [],
    },
  },
  watch: {
    "entity.properties": {
      handler(after, before) {
        // ...
      },
      deep: true,
    },
  },
});

to watch the entity.properties reactive property for changes.

handler is called when the value changes.

We set deep to true to watch for changes in all levels of the property is entity.properties is an object.

Conclusion

To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.

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 *