☰

Vue.js - ネストされたデータを適切に監視する方法 質問する

tag-icon • tag-icon javascript vue.js vue-component vue-resource
Vue.js - ネストされたデータを適切に監視する方法 質問する

私は、いくつかのプロパティの変化を適切に監視する方法を理解しようとしています。Ajax 呼び出しからデータを受け取り、そのデータをオブジェクト内に格納し、それを使用して v-for ディレクティブを通じていくつかの子コンポーネントをレンダリングする親コンポーネント (.vue ファイル) があります。以下は、実装の簡略化です。

<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新しい要素が追加されたり、既存の要素に何らかの変化があったりするたびに、何らかのアクションを実行することです。ご提案があれば、ぜひお知らせください。

ベストアンサー1

あなたはディープウォッチャーそのために:

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

これにより、配列内のオブジェクトの変更itemや配列自体への追加が検出されます（Vue.set）。JSFiddle はこちらです:http://jsfiddle.net/je2rw3rs/

編集

最上位レベルのオブジェクトのすべての変更を監視する必要がなく、ネストされたオブジェクトを直接監視するためのより簡単な構文が必要な場合は、代わりに次の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/

おすすめ記事