我想了解如何正确观察一些支柱变化。 我有一个从ajax调用接收数据的父组件(.vue文件),将数据放入一个对象中,并通过v-for指令呈现某个子组件,在我的实现简化下面:Vue.js - 如何正确观察嵌套属性
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
...然后里面的 “脚本” 标签:
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} ...]
},
}
,我的孩子里面的 “玩家” COMPONE NT我试图观看任何项目的属性变化,我用:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
它的工作原理,但它似乎有点棘手给我,我想知道,这是做正确的方式。我的目标是执行某些操作时都“托”的变化或myArray的获取新的元素或者将现有的 任何建议将appriciated
只要使用 ' “item.someOtherProp”:功能(的newval,OLDVAL){'如@Ron建议。 – Reiner
@Reiner这正是他想要避免的问题;使用ES5语法也是一样的。实际上在观看计算时没有任何额外的开销,并且在各种情况下这是一种有用的技术。 –