[Vuejs]-Watch not working as expected

by

2👍

As an alternative, you could pass product as a prop to your child component, watching each product separately. Like this:

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>

See this post also.

👤Andrei Roba

Leave a comment