Vue.js watching deep properties

Question

I'm trying to watch properties on a vue.js object, but i'm not getting the result that i want, my code is the following:

var vueTable = new Vue({
    el: '#vue-table',
    data: {
        filters: {},
    },
    watch: {
        filters: {
            handler: function () {
                console.log('watched');
            },
            deep: true
        }
    }
}

And i have a v-model on an input like so:

<input class="form-control" v-model="filters.name">

Now when the page loads it logs watched in the console just once, whenever i change the input it doesn't log anything.

Yet when i put vueTable.filters = {name: 'something'}; after the table initalization it will trigger on every change.

Is this unexpected behaviour? or do we have to define all our properties in order for them to be watched?

score 2 · Accepted Answer · edited Jul 15 '22 at 22:11

The documentation covers this here.

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

By starting with an empty object and setting v-model to filters.name, you end up adding a property dynamically. The best approach in this case would be to initialize the property in the data. It doesn't have to have a value.

data: {
    filters: { name: null },
}

score 0 · Answer 2 · edited Jul 15 '22 at 01:26

0

You can use something with the looks of this

this.$set(this.filters, 'name', "")

Using $set (as described in https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats) the observable will be correctly added

edited Jul 15 '22 at 01:26

tony19

125,647
18
229
307

answered Nov 06 '19 at 12:42

Sérgio Reis

2,483
2
19
32

score 0 · Answer 3 · edited Jul 16 '22 at 04:42

You can put your filter object initialization in data property into the created Vue lifecycle hook.

var vueTable = new Vue({
    el: '#vue-table',
    // If you attach filters at this point in time
    // the watcher will work normally.
    created: function () {
        this.$data.filters = {
            filter_one: null,
            filter_two: null
        };
    },
    data: {
        filters: null,
    },
    watch: {
        filters: {
            handler: function (newValue) {
                // Here you will get the entire filter object 
                // if some property changes.
                console.dir(newValue);
            },
            deep: true
        }
    }
}

Vue.js watching deep properties

3 Answers3

Linked