I'm trying to understand how to properly watch for some prop variation.(我试图了解如何正确地观察一些道具变异。)
I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation:(我有一个父组件(.vue文件)从ajax调用接收数据,将数据放入一个对象并使用它通过v-for指令呈现一些子组件,简化我的实现:)
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
... then inside <script>
tag:(...然后在<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 objects are like this:(item对象是这样的:)
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
Now, inside my child "player" component I'm trying to watch for any Item's property variation and I use:(现在,在我的孩子“玩家”组件中,我正在尝试观察任何Item的属性变化,我使用:)
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
It works but it seems a bit tricky to me and I was wondering if this is the right way to do it.(它有效,但对我来说似乎有点棘手,我想知道这是否是正确的方法。) My goal is to perform some action every time prop
changes or myArray
gets new elements or some variation inside existing ones.(我的目标是每次改变prop
或myArray
获取新元素或在现有元素内部进行某些变化时执行某些操作。) Any suggestion will be appreciated.(任何建议将不胜感激。)
ask by Plastic translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…