Vue me advierte el siguiente mensaje:
Puede tener un bucle de actualización infinito en una función de representación de componentes
Lo que descubrí es que debería usar métodos computarizados y no, pero no funcionó para mí. que esta causando este problema? Todo funciona, no hay un bucle infinito, pero Vue todavía me advierte.
.battle__invite(v-for='(invite, index) in invites', :key='index') battle__result.battle__result--finished( :class='getResultClass(invite.challengerScore, invite.challengedScore)' ) {{ challengeResult }}Calculado:
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' } } },Es debido a la variable challengeResult . Usted usa esto tanto en la plantilla como en la propiedad calculada y esto hace que se vuelva a renderizar infinito.
Si escribe un console.log("im in computed property") y lo coloca en getResultClass , obtiene alrededor de 200 console.log que muestran el error de renderizado infinito. Pero vue no permite volver a renderizar infinito y detenerlo (¡qué gran marco!)
¡La razón es simple! En la plantilla, usa getResultClass . En este cálculo, cambia la variable challengeResult . Luego, debido a que usa challengeResult en la sección de plantilla, provoca otra representación y la propiedad calculada se ejecuta nuevamente. ¡Y este bucle dura para siempre!