Vue: Le passage d'un composant fonctionnel à un composant non fonctionnel à l'aide de v-if ne modifie pas l'attribut v-data-*.
Version
2.6.11
Lien de reproduction
https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark
Étapes à reproduire
Cliquez sur la case à cocher.
Qu'est-ce qui est attendu ?
Il devrait dire "BLUE BOX" avec une couleur de fond bleue.
Que se passe-t-il réellement ?
Il est écrit "BLUE BOX" sans couleur de fond.
Le problème provient du fait que l'attribut data-v-* n'est pas réinitialisé pour le div blue_block lorsqu'il est échangé. Il utilise toujours l'attribut data-v-* du div enfant dans le composant fonctionnel. Ainsi, le style de la classe CSS ne s'applique pas.
Passer d'un composant fonctionnel à autre chose est utile. Par exemple, lors de l'affichage d'un simple composant de barre de chargement avant de passer à un composant plus complexe.
StefanCardnell
Tous les 3 commentaires
Je pense que cela peut avoir quelque chose à voir avec la façon dont Vue recycle les nœuds lors de la mise à jour. Pour contourner le problème, l'ajout d'un key à la fois au composant et au div donne le comportement attendu.
sirlancelot
le 2 mars 2020
Peut-être lié à https://github.com/vuejs/vue/issues/10416
posva
le 3 mars 2020
test
yysy-fe
le 10 avr. 2020
Questions connexes
paceband
·
3Commentaires
paulpflug
·
3Commentaires
julianxhokaxhiu
·
3Commentaires
wufeng87
·
3Commentaires
6pm
·
3Commentaires
Commentaire le plus utile
Je pense que cela peut avoir quelque chose à voir avec la façon dont Vue recycle les nœuds lors de la mise à jour. Pour contourner le problème, l'ajout d'un
keyà la fois au composant et au div donne le comportement attendu.