vue.js $ guardare array di oggetti

Question

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

things è un array di oggetti [{foo:1}, {foo:2}]

$watch rileva quando viene aggiunto o rimosso un oggetto, ma non quando vengono cambiati i valori su un oggetto. Come lo posso fare?

Answer 1

Si dovrebbe passare un oggetto invece di booleana come options, quindi:

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

Oppure si potrebbe impostare l'osservatore nell'istanza vue in questo modo:

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

[demo]

Answer 2

Se qualcuno ha bisogno di ottenere un oggetto che è stato modificato all'interno della matrice, per favore, controlla:

JSFiddle Example

Il codice di esempio postale:

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