Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
376 views
in Technique[技术] by (71.8m points)

javascript - Vue.js - 如何正确观察嵌套数据(Vue.js - How to properly watch for nested data)

I'm trying to understand how to properly watch for some prop variation.(我试图了解如何正确地观察一些道具变异。)

I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation:(我有一个父组件(.vue文件)从ajax调用接收数据,将数据放入一个对象并使用它通过v-for指令呈现一些子组件,简化我的实现:) <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... then inside <script> tag:(...然后在<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 objects are like this:(item对象是这样的:) item:{ prop: value, someOtherProp: { nestedProp: nestedValue, myArray: [{type: "a", num: 1},{type: "b" num: 6} ...] }, } Now, inside my child "player" component I'm trying to watch for any Item's property variation and I use:(现在,在我的孩子“玩家”组件中,我正在尝试观察任何Item的属性变化,我使用:) ... watch:{ 'item.someOtherProp'(newVal){ //to work with changes in "myArray" }, 'item.prop'(newVal){ //to work with changes in prop } } It works but it seems a bit tricky to me and I was wondering if this is the right way to do it.(它有效,但对我来说似乎有点棘手,我想知道这是否是正确的方法。) My goal is to perform some action every time prop changes or myArray gets new elements or some variation inside existing ones.(我的目标是每次改变propmyArray获取新元素或在现有元素内部进行某些变化时执行某些操作。) Any suggestion will be appreciated.(任何建议将不胜感激。)   ask by Plastic translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can use a deep watcher for that:(您可以使用深度观察者 :)

watch: { item: { handler(val){ // do stuff }, deep: true } } This will now detect any changes to the objects in the item array and additions to the array itself (when used with Vue.set ).(现在,它将检测item数组中对象的任何更改以及对数组本身的添加(与Vue.set一起使用时)。) Here's a JSFiddle: http://jsfiddle.net/je2rw3rs/(这是一个JSFiddle: http//jsfiddle.net/je2rw3rs/) EDIT(编辑) If you don't want to watch for every change on the top level object, and just want a less awkward syntax for watching nested objects directly, you can simply watch a computed instead:(如果您不想监视顶级对象的每个更改,并且只想要一个不那么笨拙的语法来直接观察嵌套对象,您可以简单地观察computed :) var vm = new Vue({ el: '#app', computed: { foo() { return this.item.foo; } }, watch: { foo() { console.log('Foo Changed!'); } }, data: { item: { foo: 'foo' } } }) Here's the JSFiddle: http://jsfiddle.net/oa07r5fw/(这是JSFiddle: http//jsfiddle.net/oa07r5fw/)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...