Vue.js - 如何正确观察嵌套数据 [英] Vue.js - How to properly watch for nested data

问题描述

我正在努力了解如何正确地观察一些道具变异。
我有一个父组件（.vue文件）从ajax调用接收数据，将数据放入一个对象并使用它通过v-for指令呈现一些子组件，简化我的实现：

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>

...然后在< script> 标签内：

... 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:{
   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
    }
}

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

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.

推荐答案

您可以使用深度观察者：

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

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

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/

编辑

如果您不想观看顶级对象的每个更改，只想减少直接观看嵌套对象的笨拙语法，您可以简单地观察计算：

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'
    }
  }
})

这是JSFiddle： http://jsfiddle.net / oa07r5fw /

Here's the JSFiddle: http://jsfiddle.net/oa07r5fw/

这篇关于Vue.js - 如何正确观察嵌套数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！