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 us

Answer 1

First, I'm not sure why you have not_accept, can't you just use !this.accept in its place?

I'm not 100% sure why you're getting this warning, but here's what I think.

The watcher for v-bind:class is watching for changes to item.result, this.accept and this.not_accept. Any change in those values will cause it to be re-rendered by calling test again. But within test, you're modifying this.accept and this.not_accept, so Vue needs to re-check again if the result has changed because of that, and in doing so it may change this.accept and this.not_accept again, and so on.

The class binding and the data is flawed. class for each of the items will be set to the same thing, but it looks as though you want a custom style for each item depending on item.result. You really shouldn't be modifying any properties of this inside test.

It's hard to give a thorough answer because I'm not completely sure of how your component works and what it should do.