Vue.js - 如何正确监视嵌套数据 [英] Vue.js - How to properly watch for nested data
问题描述
我正在尝试了解如何正确观察某些道具变化.我有一个父组件(.vue 文件),它从 ajax 调用接收数据,将数据放入一个对象中,并使用它通过 v-for 指令呈现一些子组件,下面是我的实现的简化:
<div><player v-for="(item, key, index) in player":项目=项目":index="索引":key="key""></玩家>
模板>
... 然后在 标签内:
数据(){返回 {玩家:{}},创建(){让 self = this;this.$http.get('../serv/config/player.php').then((response) => {让 pls = response.body;对于(让 p 在 pls){self.$set(self.players, p, pls[p]);}});}
item 对象是这样的:
项目:{道具:价值,someOtherProp:{NestedProp:nestedValue,myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]},}
现在,在我的子播放器"组件中,我试图观察任何 Item 的属性变化并使用:
<代码>...手表:{'item.someOtherProp'(newVal){//处理myArray"中的变化},'item.prop'(newVal){//处理 prop 的变化}}
它有效,但对我来说似乎有点棘手,我想知道这是否是正确的方法.我的目标是每次 prop
更改或 myArray
获取新元素或现有元素中的某些变化时执行一些操作.任何建议将不胜感激.
你可以使用 deep watcher 为此:
观看:{物品: {处理程序(val){//做东西},深:真实}}
现在将检测对 item
数组中对象的任何更改以及对数组本身的添加(当与 Vue.set).这是一个 JSFiddle:http://jsfiddle.net/je2rw3rs/
编辑
如果您不想监视顶级对象上的每个更改,而只想使用一种不那么笨拙的语法来直接监视嵌套对象,则可以简单地监视 computed
:>
var vm = new Vue({el: '#app',计算:{富(){返回 this.item.foo;}},手表: {富(){console.log('Foo 改变了!');}},数据: {物品: {富:'富'}}})
这是 JSFiddle:http://jsfiddle.net/oa07r5fw/
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:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
... then inside <script>
tag:
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:{
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:
...
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. Any suggestion will be appreciated.
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). Here's a 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:
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/
这篇关于Vue.js - 如何正确监视嵌套数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!