手表不能正常工作

Question

这里的问题很简单ilustrate，我在父组件上执行一个方法，它改变我的对象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也。