這裏的問題很簡單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/
這很奇怪......
不幸的是,它按預期工作。數組不需要'deep:true'。 – WaldemarIce