Open
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 envinfo
Any additional comments?
I think the issue could be linked with:
- On SSR, vue core estimate that the
v-show
add 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-show
condition than the root div, and fail to toogle it on checked.
Please check: nuxt/nuxt#30156 (comment) for more details.