-
-
Notifications
You must be signed in to change notification settings - Fork 9k
Open
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: ssr
Description
Vue version
latest (v3.5.13)
Link to minimal reproduction
Steps to reproduce
In the code:
Using v-show on an component with defineOptions({ inheritAttrs: false }); and v-bind="$attrs" is resulting in display:none; applied on the root div of the subcomponent (good behavior)+ the binded $attrs div if the initial v-show value is false (not good behavior).
<script setup>const display = ref(false);</script>
<div>
<div v-show="!display">
<div>Normal component OK</div>
</div>
<div v-show="display"> <!--- Here is display:none --->
<div>
<div v-bind="$attrs"></div> <!--- Here the display: none of v-show is set as well but should stay on the root level --->
</div>
</div>
</div>In the playground:
- Chech the box
What is expected?
The InputWithAttributes component should be displayed
What is actually happening?
The InputWithAttributes component is not displayed.
The display: none; is applied on root div + child div with v-bind:$attrs


System Info
Vue SFC Playground envinfoAny additional comments?
I think the issue could be linked with:
- On SSR, vue core estimate that the
v-showadd thedisplay: none;style and figures out that the input has av-bind="$attrs"attribute, so it clone the style attribute and add it to the input html element as well. - On Client side, the Vue app doesn't understand that the
display: none;is related to the samev-showcondition than the root div, and fail to toogle it on checked.
Please check: nuxt/nuxt#30156 (comment) for more details.
linzhe141 and yangxiuxiu1115
Metadata
Metadata
Assignees
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: ssr
