Я намагаюся зрозуміти, як правильно слідкувати за певними варіаціями опори. У мене є батьківський компонент (.vue файли), який отримує дані від виклику ajax, поміщає дані всередину об'єкта і використовує їх для візуалізації дочірнього компонента через директиву v-for, нижче спрощення моєї реалізації:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
... тоді всередині <script>
тегу:
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]);
}
});
}
предметні об'єкти виглядають так:
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
Тепер усередині мого дочірнього компонента "player" я намагаюся спостерігати за різними властивостями елемента, і я використовую:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
Це працює, але це здається мені трохи складним, і мені було цікаво, чи це правильний спосіб зробити це. Моя мета - виконувати якусь дію щоразу, коли prop
змінюється або myArray
отримує нові елементи чи певні зміни всередині існуючих. Будь-яка пропозиція буде вдячна.
keys
всередині об'єкта? Приклад:"item.*": function(val){...}
"item.someOtherProp": function (newVal, oldVal){
як запропонував @Ron.