Menu Close

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

How 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.

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.

Posted in Vue.js

You can also read...