search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.7k stars 33.67k forks source link

Swapping from functional to non-functional component using v-if does not change v-data-* attribute. #11171

Open StefanCardnell opened 4 years ago

StefanCardnell commented 4 years ago

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.

https://imgur.com/a/gukDePJ

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.

sirlancelot commented 4 years ago

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.

posva commented 4 years ago

Might be related to https://github.com/vuejs/vue/issues/10416

yysy-fe commented 4 years ago

test

PeterAlfredLee commented 3 years ago

I don't think this is a problem.

According to the comment here :

functional component with scopeId will not inherit parent scopeId

The functional components should not inherit parent if the parent is scoped.

I think we have a workarounds here: we can remove the scoped attribute in the parent component. Seems it works : https://codesandbox.io/embed/vigorous-frost-t1f84