vue.js $ sehen Array von Objekten

Question

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

things ist ein Array von Objekten [{foo:1}, {foo:2}]

$watch erkennt, wenn ein Objekt hinzugefügt oder entfernt wird, aber nicht, wenn die Werte für ein Objekt geändert werden. Wie kann ich das machen?

Answer 1

Sie sollten ein Objekt statt boolean als options passieren, so:

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

Oder Sie könnten den Beobachter in die vue weise wie folgt festgelegt:

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

[demo]

Answer 2

Wenn jemand muss ein Element erhalten, das innerhalb des Arrays geändert wurde, bitte, überprüfen Sie es:

JSFiddle Example

Die Post Beispielcode:

new Vue({ 
    ... 
    watch: { 
    things: { 
     handler: function (val, oldVal) { 
     var vm = this; 
     val.filter(function(p, idx) { 
      return Object.keys(p).some(function(prop) { 
       var diff = p[prop] !== vm.clonethings[idx][prop]; 
       if(diff) { 
        p.changed = true;       
       } 
      }) 
     }); 
     }, 
     deep: true 
    } 
    }, 
    ... 
})