Vue: Swapping from functional to non-functional component using v-if does not change v-data-* attribute.
Version
2.6.11
Reproduction link
https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark
Steps to reproduce
Click the tick box.
What is expected?
It should say "BLUE BOX" with a blue background colour.
What is actually happening?
It says "BLUE BOX" with no background colour.
The issue stems from the data-v-* attribute not being re-set for the blue_block div when it is swapped to. It is still using the data-v-* attribute of the child div in the functional component. Thus the CSS class styling does not apply.
Swapping from a functional component to something else is useful. E.g. When showing a simple loading bar component before swapping to a more complex component.
StefanCardnell
All 3 comments
I think this may have something to do with how Vue recycles nodes during update. As a workaround, adding a key to both the component and the div yields the expected behavior.
sirlancelot
on 2 Mar 2020
Might be related to https://github.com/vuejs/vue/issues/10416
posva
on 3 Mar 2020
test
yysy-fe
on 10 Apr 2020
Related issues
lmnsg
·
3Comments
paceband
·
3Comments
fergaldoyle
·
3Comments
julianxhokaxhiu
·
3Comments
franciscolourenco
·
3Comments
Most helpful comment
I think this may have something to do with how Vue recycles nodes during update. As a workaround, adding a
keyto both the component and the div yields the expected behavior.