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?

tony19 · Accepted Answer · 2022-07-15 22:11:45Z

2

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 },
}

edited Jul 15, 2022 at 22:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 26, 2017 at 13:59

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 01:26:35Z

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, 2022 at 1:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 6, 2019 at 12:42

Sérgio Reis

2,5232 gold badges22 silver badges32 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:42:53Z

0

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
        }
    }
}

edited Jul 16, 2022 at 4:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 10, 2021 at 17:39

Valentine Shi

8,0894 gold badges60 silver badges50 bronze badges

Collectives™ on Stack Overflow

Vue.js watching deep properties

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related