Vue is warning me the following message:
You may have an infinite update loop in a component render function
What I found out is that I should use computed and not methods, but it didn't work for me. What is causing this problem? Everything is working, there's no infinite loop happening, but Vue is still warning me.
.battle__invite(v-for='(invite, index) in invites', :key='index')
battle__result.battle__result--finished(
:class='getResultClass(invite.challengerScore, invite.challengedScore)'
) {{ challengeResult }}
Computed:
getResultClass() {
return (challengerScore, challengedScore) => {
if (challengerScore > challengedScore) {
this.challengeResult = 'win'
return 'win'
} else if (challengerScore < challengedScore) {
this.challengeResult = 'defeat'
return 'defeat'
} else {
this.challengeResult = 'draw'
return 'draw'
}
}
},
It's because of challengeResult variable. You use this in both template and computed property and this causes infinity re-render.
If you write a console.log("im in computed property") and put it in getResultClass, you get about 200 console.log which shows the infinity re-rendering bug. But vue doesn't allow to do infinity re-rendering and stop it (what a great framework!)
The reason is simple! In template you use getResultClass. In this computed you change challengeResult variable. Then because you use challengeResult in template section, It causes another re-rendering and the computed property runs again. And this loop goes forever!