You may have an infinite update loop in a component render function

Question

I'm new to VueJS, I've got warning from Vue,

[Vue warn]: You may have an infinite update loop in a component render function. 

When i use V-for variable in V-bind:style, here is an example : in template :

<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>

in script :

data() {
    return {
        accept: false,
        not_accept: false,
    };
},
methods: {
    test(result) {
        if (result == 'accept') {
            this.accept = true;
            this.not_accept = false;
        } else if (result == 'Not accept') {
            this.accept = false;
            this.not_accept = true;
        } else {
            console.log(result);
        }

        return {
            success: this.accept,
            danger: this.not_accept,
        };
    },
},

Answer 1

@Decade is right about the problem. Here is the exact problem:

1. You are in render method rendering the list of item using some state value

NOTE: render method is triggered whenever any state changes

2. Then you are trying to bind the class based on a result of function test this function is flawed as it is again trying to mutate the state, thus causing the render - test - render cycle.

You can solve this problem by making your test function not mutate the state instead, like so:

methods: {
    test(result) {
        let accept;
        if (result == 'accept') {
            accept = true;
        } else if (result == 'Not accept') {
            accept = false;
        } else {
            console.log(result);
        }

        return {
            success: accept,
            danger: !accept,
        };
    },
}

I hope that helped!