Estou tentando entender como observar corretamente algumas variações de objetos. Eu tenho um componente pai (arquivos .vue) que recebe dados de uma chamada ajax, coloca os dados dentro de um objeto e os usa para renderizar algum componente filho através de uma diretiva v-for, abaixo de uma simplificação da minha implementação:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
... então <script>
tag interna :
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]);
}
});
}
os objetos de item são assim:
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
Agora, dentro do componente "player" do meu filho, estou tentando observar a variação de propriedade de qualquer item e uso:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
Funciona, mas parece um pouco complicado para mim e eu queria saber se este é o caminho certo para fazê-lo. Meu objetivo é realizar alguma ação sempre que prop
mudar ou myArray
obter novos elementos ou alguma variação dentro dos existentes. Qualquer sugestão será apreciada.
keys
dentro de um objeto? Exemplo:"item.*": function(val){...}
"item.someOtherProp": function (newVal, oldVal){
como sugerido por Ron.