我正在尝试了解如何正确观察道具的一些变化。我有一个父组件(.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} ...]
},
}
现在,在我的孩子“玩家”组件中,我试图观察任何Item的属性变化,并使用:
...
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建议使用 即可。