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

javascript vue.js vue-component vue-resource

2022-08-29 22:38:43

我试图了解如何正确观察一些道具的变化。我有一个父组件（.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} ...]
    },
}

现在，在我的子“播放器”组件中，我试图监视任何 Item 的属性变化，我使用：

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

它有效，但对我来说似乎有点棘手，我想知道这是否是正确的方法。我的目标是每次更改或获得新元素或现有元素中的某些变化时执行一些操作。任何建议将不胜感激。propmyArray

答案 1

您可以使用深度观察器：

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

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

编辑

如果您不想监视顶级对象上的每个更改，而只想使用不那么笨拙的语法来直接监视嵌套对象，则可以简单地观察：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/

答案 2

另一个好方法和一个更优雅的方法如下：

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

（我在这里的评论中从@peerbolte那里学到了这种方法)