我在试着了解如何正确地观察一些道具的变化。我有一个父组件(.vue文件),它接收来自ajax调用的数据,将数据放入对象中,并使用它通过v-for指令呈现一些子组件,下面是我的实现的简化:
<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对象是这样的:
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
获得新元素或现有元素中的某些变化时执行一些操作。任何建议都将不胜感激。
您可以使用深度观察器:
watch: {
item: {
handler(val){
// do stuff
},
deep: true
}
}
这将检测对item
数组中对象的任何更改以及对数组本身的添加(与vue.set一起使用时)。下面是一个JSfiddle:http://jsfidle.net/je2rw3rs/
编辑
如果您不想查看顶层对象上的每一个更改,而只是想要一个不那么尴尬的语法来直接查看嵌套对象,那么您可以只查看computed
:
var vm = new Vue({
el: '#app',
computed: {
foo() {
return this.item.foo;
}
},
watch: {
foo() {
console.log('Foo Changed!');
}
},
data: {
item: {
foo: 'foo'
}
}
})
以下是JSfiddle:http://jsfidle.net/oa07r5fw/