search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.75k stars 8.35k forks source link

v-show does not work when there are multiple first-level elements under a single component #12390

Closed xuncanzhe closed 1 week ago

xuncanzhe commented 1 week ago

Vue version

3.5.12

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-toxnby?file=src%2Fcomponents%2FHelloWorld.vue

Steps to reproduce

Just look at the display content on the right. It works fine when using v-if or a single first-level element

What is expected?

Only 0 is displayed.

What is actually happening?

display: 0 12

System Info

No response

Any additional comments?

No response

edison1105 commented 1 week ago

this is the expected behavior. see Playground, where is a warning.

xuncanzhe commented 1 week ago

Have you tried changing it to v-show="false"? It still shows 1 2. Is this expected?

xuncanzhe commented 1 week ago

playground_new

edison1105 commented 1 week ago

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.

The directives will not function as intended. no matter whether true or false.

xuncanzhe commented 1 week ago

thanks! Does it mean that there can only be one first-level element under template ? In the case of multiple, v-show will no longer work?

edison1105 commented 1 week ago

thanks! Does it mean that there can only be one first-level element under template ? In the case of multiple, v-show will no longer work?

Correct.