Vue: El cambio de componente funcional a no funcional usando v-if no cambia el atributo v-data- *.
Versión
2.6.11
Enlace de reproducción
https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark
pasos para reproducir
Haga clic en la casilla de verificación.
¿Lo que es esperado?
Debería decir "BLUE BOX" con un color de fondo azul.
¿Qué está pasando realmente?
Dice "CAJA AZUL" sin color de fondo.
El problema se debe a que el atributo data-v- * no se restablece para el div blue_block cuando se cambia a. Todavía está usando el atributo data-v- * del div hijo en el componente funcional. Por lo tanto, el estilo de la clase CSS no se aplica.
Es útil cambiar de un componente funcional a otro. Por ejemplo, cuando se muestra un componente de barra de carga simple antes de cambiar a un componente más complejo.
StefanCardnell
Todos 3 comentarios
Creo que esto puede tener algo que ver con la forma en que Vue recicla los nodos durante la actualización. Como solución alternativa, agregar key tanto al componente como al div produce el comportamiento esperado.
sirlancelot
en 2 mar. 2020
Podría estar relacionado con https://github.com/vuejs/vue/issues/10416
posva
en 3 mar. 2020
prueba
yysy-fe
en 10 abr. 2020
Temas relacionados
gkiely
·
3Comentarios
guan6
·
3Comentarios
bdedardel
·
3Comentarios
wufeng87
·
3Comentarios
franciscolourenco
·
3Comentarios
Comentario más útil
Creo que esto puede tener algo que ver con la forma en que Vue recicla los nodos durante la actualización. Como solución alternativa, agregar
keytanto al componente como al div produce el comportamiento esperado.