2017-11-11 135 views
0

這裏的問題很簡單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/[email protected]/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/
這很奇怪......

+0

不幸的是,它按預期工作。數組不需要'deep:true'。 – WaldemarIce

回答

2

作爲一種替代方法,您可以將產品作爲道具傳遞給您的孩子組件,分別監控每個產品。就像這樣:

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/[email protected]/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也。

+0

謝謝,但我不想有幾個'孩子',這個項目上的孩子是谷歌地圖,我只是改變它裏面的標記的經度/緯度(在這種情況下,'產品'對象) –

+0

然後只傳遞''而不是,它應該可以工作 –

+0

這種方式很愚蠢:https://jsfiddle.net/dmbgmxzh/5/。 Bur不是這樣工作的:https://jsfiddle.net/dmbgmxzh/6/ –