Vue de Profondeur en regardant un tableau d'objets et de calculer le changement?
J'ai un tableau appelé people
qui contient des objets comme suit:
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 du journal le changement:
<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 le la question que j'ai posée 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!
Vous devez vous connecter pour publier un commentaire.
Votre fonction de comparaison entre l'ancienne valeur et la nouvelle valeur est d'avoir quelques problème. Il est préférable de ne pas compliquer les choses à ce point, car il permettra d'augmenter votre débogage effort plus tard. Vous devez garder les choses simples.
La meilleure façon est de créer un
person-component
et de regarder chaque personne séparément à l'intérieur de son propre composant, comme indiqué ci-dessous:Veuillez trouver ci-dessous un exemple de travail pour regarder à l'intérieur de personne composant. Si vous souhaitez gérer sur parent côté, vous pouvez utiliser
$emit
d'envoyer un événement à la hausse, contenant lesid
modifiée personne.JS:
HTML:
object.get_name()
etobject.set_name()
mais pas votreobject.name
de la propriété elle-même. Par conséquent, la comparaison ne fonctionnera pas. Vous pouvez faire unconsole.log(object)
pour voir les getter et setter de Vue de la réactivité du systèmeJ'ai changé la mise en œuvre de il pour obtenir votre problème résolu, j'ai fait un objet à suivre l'ancien changements et la comparer avec celle. Vous pouvez l'utiliser pour résoudre votre problème.
Ici, j'ai créé une méthode, dans laquelle l'ancienne valeur sera stockée dans une variable distincte et, qui seront ensuite utilisés dans une montre.
Voir le jour codepen
vm.$data
, merci!Elle est bien définie comportement. Vous ne pouvez pas obtenir que l'ancienne valeur pour un muté objet. C'est parce que à la fois le
newVal
etoldVal
font référence au même objet. Vue s' pas garder une vieille copie d'un objet qui vous muté.A vous remplacé l'objet avec un autre, Vue aurait fourni références correctes.
Lire la
Note
dans la section docs. (vm.$montre
)Plus sur ce ici et ici.
C'est ce que j'utilise pour la profondeur de regarder un objet.
Mon exigence était de regarder l'enfant des champs de l'objet.