期待どおりに動作しない時計

Question

ここでの問題は簡単ですが、私のオブジェクトのプロパティの値を変更する親コンポーネントのメソッドを実行していますproducts（親のdataにも属しています）良い。

しかし、私は、子コンポーネントに小道具としてこのオブジェクトを渡すと深く<それを見ている - あなたはalert('changed');が実行されることはありません見ることができるように、これは、失敗している：

Vue.component('child', { 
 
\t props: ['prods'], 
 
    watch: { 
 
    \t prods: { 
 
    \t handler: function(new_val, old_val) { 
 
     \t alert('watched'); 
 
     }, 
 
     deep: true 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    template: '<div>{{products[0].value}}<br><button v-on:click="incre">increment prod 0</button></div>', 
 
    data: { 
 
    \t products: [ 
 
    \t {id: 1, name: 'prod1', value: 20}, 
 
     {id: 2, name: 'prod2', value: 40}, 
 
    ], 
 
    }, 
 
    methods: { 
 
    incre: function() { 
 
     this.products[0].value += 20; 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script> 
 
<div id="app"> 
 
    <child v-bind:prods="products"></child> 
 
</div> 
 
https://jsfiddle.net/dmbgmxzh/6/

（アップデート）：
この作品：これはないhttps://jsfiddle.net/dmbgmxzh/5/
：https://jsfiddle.net/dmbgmxzh/6/
これは奇妙です...

Answer 1

代わりに、製品を子コンポーネントに渡して、各製品を個別に見てもらうことができます。このように：

Vue.component('child', { 
 
    props: ['product'], 
 
    watch: { 
 
     product: { 
 
      handler: function (new_val, old_val) { 
 
       alert('watched'); 
 
      }, 
 
      deep: true 
 
     } 
 
    } 
 
}) 
 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     products: [ 
 
      { 
 
       id: 1, 
 
       name: 'prod1', 
 
       value: 20 
 
      }, 
 
      { 
 
       id: 2, 
 
       name: 'prod2', 
 
       value: 40 
 
      }, 
 
    ], 
 
    }, 
 
    methods: { 
 
     incre: function() { 
 
      this.products[0].value += 20; 
 
     } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script> 
 
<div id="app"> 
 
    <div>{{products[0].value}}<br><button v-on:click="incre">increment prod 0</button></div> 
 
    <child :product="product" v-for="product in products"></child> 
 
</div>

もthis postを参照してください。