我试图了解如何正确观察一些道具变化。我有一个父组件(.vue 文件),它从 ajax 调用接收数据,将数据放入对象中并使用它通过 v-for 指令呈现一些子组件,下面是我的实现的简化:
<template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template>
…然后在<script>标签内:
<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} ...] }, }
现在,在我的孩子“播放器”组件中,我试图观察任何项目的属性变化,我使用:
... watch:{ 'item.someOtherProp'(newVal){ //to work with changes in "myArray" }, 'item.prop'(newVal){ //to work with changes in prop } }
它有效,但对我来说似乎有点棘手,我想知道这是否是正确的方法。我的目标是每次prop更改或myArray获取新元素或现有元素中的一些变化时执行一些操作。任何建议将不胜感激。
prop
myArray
您可以为此使用深度观察者:
watch: { item: { handler(val){ // do stuff }, deep: true } }
现在,这将检测数组中对象的任何更改item以及数组本身的添加(与Vue.set一起使用时)。这是一个 JSFiddle:http: //jsfiddle.net/je2rw3rs/
item
编辑
如果您不想观察顶级对象的每一个变化,而只是想要一种不那么尴尬的语法来直接观察嵌套对象,您可以简单地观察 a computed:
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: //jsfiddle.net/oa07r5fw/