Vue.js – How to properly watch for nested data

by

You can use a deep watcher for that:

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

This will now detect any changes to the objects in the item array and additions to the array itself (when used with Vue.set). Here’s a JSFiddle: http://jsfiddle.net/je2rw3rs/

EDIT

If you don’t want to watch for every change on the top level object, and just want a less awkward syntax for watching nested objects directly, you can simply watch a computed instead:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

Here’s the JSFiddle: http://jsfiddle.net/oa07r5fw/

More Related Contents:

  1. Is there any way to ‘watch’ for localstorage in Vuejs?
  2. How to add external JS scripts to VueJS Components?
  3. vuejs update parent data from child component
  4. Communication between sibling components in Vue.js 2.0
  5. Vue.js 3 Event Bus
  6. [Vue warn]: Property or method is not defined on the instance but referenced during render
  7. How to listen for ‘props’ changes
  8. Passing props dynamically to dynamic component in VueJS
  9. Vuejs typescript this.$refs..value does not exist
  10. Vue v-on:click does not work on component
  11. Vue template or render function not defined yet I am using neither?
  12. Global data with VueJs 2
  13. Add global variable in Vue.js 3
  14. Property ‘XXX’ does not exist on type ‘CombinedVueInstance’
  15. CORS issue with Vue.js
  16. When should I use Vuex?
  17. Vue.js – Add class to clicked button
  18. VueJS: why is “this” undefined?
  19. How to reference static assets within vue javascript
  20. VueJs 2.0 emit event from grand child to his grand parent component
  21. Can I pass parameters in computed properties in Vue.Js
  22. Why not always use the index as the key in a vue.js for loop?
  23. Vue – Deep watching an array of objects and calculating the change?
  24. importing a package in ES6: “Failed to resolve module specifier “vue””
  25. Parentheses while calling a method in Vue
  26. forEach loop through two arrays at the same time in javascript
  27. multiple pages in Vue.js CLI
  28. Vue components communication
  29. How to display async data in vue template
  30. How to navigate using vue router from Vuex actions

Leave a Comment