Puede tener un bucle de actualización infinito en una función de procesamiento de componentes

Soy nuevo en VueJS, tengo una advertencia de Vue,

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

Cuando uso V-for variable en V-bind: style, aquí hay un ejemplo: en plantilla:

 
{{item.id}}

en guión:

 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, }; }, }, 

@Decade tiene razón sobre el problema. Aquí está el problema exacto:

  1. Usted está en el método de renderizado, representando la lista de elementos usando algún valor de estado.

NOTA: el método de renderización se activa cada vez que cambia un estado

  1. Entonces está intentando enlazar la clase basándose en el resultado de la test de función. Esta función es defectuosa, ya que nuevamente intenta mutar el estado, lo que provoca el ciclo de render – test – render.

Puede resolver este problema haciendo que su función de prueba no mute el estado, así:

 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, }; }, } 

Espero que haya ayudado!

En primer lugar, no estoy seguro de por qué no ha not_accept , ¿no puede simplemente usar !this.accept en su lugar?

No estoy 100% seguro de por qué está recibiendo esta advertencia, pero esto es lo que pienso.

El observador de v-bind:class está observando los cambios realizados en item.result , this.accept y this.not_accept . Cualquier cambio en esos valores hará que se vuelva a representar llamando a test nuevamente. Pero dentro de la test , está modificando this.accept y this.not_accept , por lo que Vue debe volver a verificar si el resultado ha cambiado debido a eso, y al hacerlo puede cambiar this.accept y this.not_accept nuevo , y pronto.

El enlace de class y los datos son defectuosos. class para cada uno de los elementos se configurará de la misma manera, pero parece que usted desea un estilo personalizado para cada elemento, dependiendo de item.result . Realmente no deberías estar modificando ninguna de las propiedades de this test interna.

Es difícil dar una respuesta completa porque no estoy completamente seguro de cómo funciona su componente y qué debería hacer.

Puede obtener este error si llama a una función en lugar de pasar una función en una directiva vue. Aquí hay un ejemplo:

Hice una directiva personalizada para cargar datos a través de AJAX cuando se muestra una pestaña de refuerzo .

Esto es malo:

  v-on-show-bs-tab="getFirstPageSites()" 

Aquí, vue parece llamar a la función (o más bien evaluar la expresión) y pasar el resultado a la directiva.

Esto es bueno:

  v-on-show-bs-tab="getFirstPageSites" 

Aquí paso la función por nombre, de modo que puedo llamarla en la directiva.