current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite
1
 
ready: function() {
  this.$watch('things', function(){console.log('a thing changed')}, true);
}

things is an array of objects [{foo:1}, {foo:2}]

$watch detects when an object is added or removed, but not when values on an object are changed. How can I do that?

share|improve this question
up vote 10 down vote accepted

You should pass an object instead of boolean as options, so:

ready: function () {
  this.$watch('things', function () {
    console.log('a thing changed')
  }, {deep:true})
}

Or you could set the watcher into the vue instance like this:

new Vue({
  ...
  watch: {
    things: {
      handler: function (val, oldVal) {
        console.log('a thing changed')
      },
      deep: true
    }
  },
  ...
})

[demo]

share|improve this answer
    
Nice, this was a migration issue. In the last version of vue I used true as the last argument meant deep. Ty! – Stephen Bugs Kamenar Dec 15 '15 at 16:56
    
Worked for me. Thanks! – Lorenzo Sep 13 '16 at 9:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.