J'ai un tableau appelé people qui contient des objets de la façon suivante:
Avant
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
Il peut changer:
Après
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]
Avis Frank vient d'avoir 33.
J'ai une appli où je suis en train de regarder les gens tableau et lorsque l'une des valeurs les modifications, puis journal de la modification:
<style>
input {
display: block;
}
</style>
<div id="app">
<input type="text" v-for="(person, index) in people" v-model="people[index].age" />
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
},
watch: {
people: {
handler: function (val, oldVal) {
// Return the object that changed
var changed = val.filter( function( p, idx ) {
return Object.keys(p).some( function( prop ) {
return p[prop] !== oldVal[idx][prop];
})
})
// Log it
console.log(changed)
},
deep: true
}
}
})
</script>
J'ai basé cette sur la question que j'ai demandé hier à propos de la matrice de comparaisons et choisis le moyen le plus rapide de travail la réponse.
Donc, à ce stade, je m'attends à voir un résultat de: { id: 1, name: 'Frank', age: 33 }
Mais tout ce que je rentre dans la console (en gardant à l'esprit que je l'ai eu dans un composant):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)
Et dans le codepen que j'ai fait, le résultat est un tableau vide et non pas de l'objet modifié qui a changé, qui serait ce à quoi je m'attendais.
Si quelqu'un pourrait suggérer pourquoi ce qui se passe ou où je suis allé mal ici, alors il serait grandement apprécié, merci beaucoup!
