vue.js $ oglądać Tablica obiektów

Question

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

things jest tablicą obiektów [{foo:1}, {foo:2}]

$watch wykrywa, gdy obiekt jest dodawane lub usuwane, ale nie wtedy, gdy wartości na obiekcie są zmieniane. Jak mogę to zrobić?

Answer 1

Należy przekazać obiekt zamiast boolean jako options tak:

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

Albo można ustawić obserwatora na przykład vue jak ten:

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

[demo]

Answer 2

Jeśli ktoś musi dostać przedmiot, który został zmieniony w tablicy, sprawdź go:

JSFiddle Example

Post przykładowy kod:

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 
    } 
    }, 
    ... 
})