Vue.js - 如何正确观察嵌套属性

问题描述：

我想了解如何正确观察一些支柱变化。我有一个从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语法也是一样的。实际上在观看计算时没有任何额外的开销，并且在各种情况下这是一种有用的技术。 –

答

里面的一些变化，您可以使用一个deep watcher：

watch{ 
    item: { 
    handler(val){ 
     // do stuff 
    }, 
    deep: true 
    } 
}

这现在将检测item阵列中对象的任何更改，并添加到阵列本身（与Vue.set一起使用时）。这里有一个的jsfiddle：http://jsfiddle.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://jsfiddle.net/oa07r5fw/

通过这种方式，每当任何道具有变化时，都会调用“处理程序”，我的目的是将处理程序分开以便观察变化是发生在“prop”还是在“someOtherProp”中的myArray内 – Plastic

如果您只是想观看对特定的嵌套对象进行更改，那么你在做什么是好的。如果你想要一个不太笨拙的语法，你可以看一个'computed'代替：http://jsfiddle.net/c52nda7x/ –

正是我在找的东西，现在看起来对我来说很逻辑：创建一个计算属性，返回嵌套支撑并观察它。 Tnx很多。 – Plastic

答

另一个好办法，一个是多一点优雅如下：

watch:{ 
    'item.someOtherProp': function (newVal, oldVal){ 
     //to work with changes in someOtherProp 
    }, 
    'item.prop': function(newVal, oldVal){ 
     //to work with changes in prop 
    } 
}

（我在comment here了解到这种方法从@peerbolte）

方式更优雅（不只是一点点）：P。这应该在Vue.js文档中，因为它是一个常见的用例。我一直在寻找解决方案的小时，谢谢你的回答。 – Symba

@symba有趣的是，人们并没有注意到这是OP要求避免的同样的事情，仅仅是'ES5'语法。我们当然可以争辩说['ES2015方法定义']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions）本身并不是很优雅，但它很实用错过了这个问题的关键点，那就是如何避免包裹这个名字就是引号。我猜大多数人都在回答已经包含答案的原始问题，并且实际上正在寻找一些如你所说的没有很好记录的东西， –

@craig_h超级有趣的一点。我原本打算好几个小时才找到一种观看嵌套道具的好方法。这个问题标题是我发现的最接近的问题，但我错过了他在问题的主体中列出了引用的道具，但发现答案并不那么优雅。我终于在另一个问题的评论中找到了引用的道具方法，并试图创建一个问题来自我回答它作为SO上引用的道具方法的文档。但是这个问题恰恰是我的标题，因此我在这里添加了答案。也许我应该创造一个新的问题。 –

Vue.js - 如何正确观察嵌套属性

相关推荐