小编典典

Vue.js - 如何正确监视嵌套数据

all

我试图了解如何正确观察一些道具变化。我有一个父组件(.vue 文件),它从 ajax 调用接收数据,将数据放入对象中并使用它通过 v-for
指令呈现一些子组件,下面是我的实现的简化:

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

…然后在<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获取新元素或现有元素中的一些变化时执行一些操作。任何建议将不胜感激。


阅读 305

收藏
2022-03-06

共1个答案

小编典典

您可以为此使用深度观察者

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

现在,这将检测数组中对象的任何更改item以及数组本身的添加(与Vue.set一起使用时)。这是一个 JSFiddle:http:
//jsfiddle.net/je2rw3rs/

编辑

如果您不想观察顶级对象的每一个变化,而只是想要一种不那么尴尬的语法来直接观察嵌套对象,您可以简单地观察 a 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/

2022-03-06