[Vuejs]-You may have an infinite update loop in a component render function error – solution?

by

0👍

The ‘loop’ in this case refers to an infinite recursion rather than a for loop.

That warning is logged here:

https://github.com/vuejs/vue/blob/ff911c9ffef16c591b25df05cb2322ee737d13e0/src/core/observer/scheduler.js#L104

It may not be immediately obvious what most of that is doing but the key part of the code is the line if (circular[id] > MAX_UPDATE_COUNT) {, which is checking whether a particular watcher has been triggered more than 100 times.

When reactive data changes it will cause any components that depend on that data to be re-rendered. If the rendering process changes that same data then rendering will be triggered again. If the data never stabilizes then this will continue forever.

Here’s a simple example of a component that triggers that warning:

<template>
    <div>
        {{ getNextCount() }}
    </div>
</template>

<script>
export default {
    data () {
        return {
            count: 1
        }
    },

    methods: {
        getNextCount () {
            this.count++

            return this.count
        }
    }
}
</script>

The template has a dependency on count but by calling getNextCount it will also change the value of count. When that value changes the component will be re-added to the rendering queue because a dependency has changed. It can never break out of this cycle because the value keeps changing.

I can’t say for sure what is causing this problem in your component as you haven’t posted enough code. However, it could be something like the line this.uniqueLobs = ..., assuming that is being called during rendering. In general I would suggest avoiding changing anything on this during the rendering phase. Rendering should be read-only. Generally you’d use computed properties for any derived data that you want to keep around.

0👍

Most times it’s as a result of how you’re passing props to another component.

If it’s Vue.js 2, try using v-on:[variable-name].

Leave a comment