Sto cercando di capire come guardare correttamente per qualche variazione di prop. Ho un componente genitore (file .vue) che riceve dati da una chiamata Ajax, inserisce i dati all'interno di un oggetto e li usa per rendere alcuni componenti figlio attraverso una direttiva v-for, sotto una semplificazione della mia implementazione:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
... quindi all'interno del <script>
tag:
data(){
return {
players: {}
},
created(){
let self = this;
this.$http.get('../serv/config/player.php').then((response) => {
let pls = response.body;
for (let p in pls) {
self.$set(self.players, p, pls[p]);
}
});
}
gli oggetti oggetto sono così:
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
Ora, all'interno del componente "player" di mio figlio, sto cercando di verificare la variazione delle proprietà di qualsiasi articolo e utilizzo:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
Funziona ma mi sembra un po 'complicato e mi chiedevo se questo è il modo giusto di farlo. Il mio obiettivo è quello di eseguire alcune azioni ogni volta che prop
cambia o myArray
ottiene nuovi elementi o alcune variazioni all'interno di quelli esistenti. Ogni suggerimento sarà apprezzato.
keys
all'interno di un oggetto? Esempio:"item.*": function(val){...}
"item.someOtherProp": function (newVal, oldVal){
come suggerito @Ron.