Vuejs watch property triggers "Maximum recursive updates exceeded."

Viewed 38

I'm trying to detect if the values of filters were changed to update the dataChanged prop, here's the function

    watch: {
        /**
         * Watch the editing property.
         * Check if the new value of filters contain a value diiferent then undefined
         *
         * @param  {bool}  value   The value
         */
        filters: {
            handler (newValue) {
                Object.entries(newValue).forEach((prop) => {
                    if (typeof prop[1] === 'undefined') {
                        this.dataChanged = true;
                    } else if (prop[1].length > 0) {
                        this.dataChanged = true;
                    }
                });
            },
            deep: true
        }
    },

and it's triggering the following warning

Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Any idea how I can approach this differently?

0 Answers
Related