手表無法正常工作

Question

這里的問題很容易闡明，我正在父組件上執行一個方法，該方法更改了我的對象products （也屬於父data ）的屬性的值，這很好用。

但是我將這個對象作為道具傳遞給子組件，並對其進行了深入的觀察<-這是失敗的，因為您可以看到alert('changed'); 永遠不會執行：

 Vue.component('child', { props: ['prods'], watch: { prods: { handler: function(new_val, old_val) { 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: { 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"> <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> 

另請參閱此帖子 。