From 8ad0b0b131c328d7985c437639aec8b507564739 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sat, 18 Oct 2025 03:30:40 -0600 Subject: [PATCH] Fix: Eliminar re-renderizados innecesarios en accordiones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remover JSON.parse(JSON.stringify()) de accordionItems computed - Remover clonación innecesaria en obtenerMuestraPorValue - Pasar referencias directas en lugar de copias profundas - Los accordiones ahora mantienen su estado sin parpadeos - Mejora significativa en la fluidez de la interfaz El problema era que al clonar las muestras en cada render, Vue detectaba objetos "nuevos" y re-montaba completamente los componentes accordion, causando un efecto visual de parpadeo cada vez que se actualizaba un valor. --- nuxt4/app/pages/cata/sesion.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue index ca73dcc..0b9b9dd 100644 --- a/nuxt4/app/pages/cata/sesion.vue +++ b/nuxt4/app/pages/cata/sesion.vue @@ -239,7 +239,7 @@ const accordionItems = computed(() => { return sesionActiva.value.muestras.map((muestra) => ({ label: '', // Usaremos slot #default para el contenido del header value: `muestra-${muestra.muestraId}`, - muestra: JSON.parse(JSON.stringify(muestra)) as Muestra, // Datos extra para el template + muestra, // Pasar referencia directa sin clonar })) }) @@ -249,9 +249,7 @@ const obtenerMuestraPorValue = (value: string): Muestra | null => { // Extraer el ID de la muestra del value (formato: "muestra-{id}") const muestraId = parseInt(value.replace('muestra-', '')) - const muestra = sesionActiva.value.muestras.find(m => m.muestraId === muestraId) - if (!muestra) return null - return JSON.parse(JSON.stringify(muestra)) as Muestra + return sesionActiva.value.muestras.find(m => m.muestraId === muestraId) || null } // Inicializar al montar