SSR bug with v-show + inheritAttrs: false + v-bind="$attrs" #12503
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
scope: ssr
Vue version
latest (v3.5.13)
Link to minimal reproduction
https://play.vuejs.org/#__SSR__eNrVVk1v2zgQ/StcYQFngdDuJu1htW6A7iKH7kdb7AbtISoKWRrZbGlSICnZhuH/3iEpSrSjJE1vvdjSvJnhm+E8UvvkVV1P2waSNJnrQrHaEA2mqclVJti6lsqQvYLqQCol1yRL0DVLfu+x16JuzAdmVq+MUWzRGNDBczobAe1So/HvlKzHQp19NOpGyiWHkxBv7P0zUUihDSlWUHyBkrwkWMtZlXMNvyDsQQNb81ZAB04mx8jNRh4h85lvE/ZnbmBd89wAPhMyL1lLCp5r/TJLavo8S5wZgZguzxfA0eENbAgIo3ZZQlq6lqWzdjzRNgvBcdaKw5bYH1pI3ucPK/TtCmZCvsAOw/6GHdaXJYO9pXolNwj91K8Yg4FO15kYDPz/sf9pjGAnClhJXoJC3DEiMg4OJcV8h8kYIY2tHyX9KOeTwKdxNnFwvw0z3Ae/zd3TfBbtfnKeGI0zU7Hl9LOWAtW0t87IVa5rxkG9rQ3DmcqSlDjEYjnncvOXsxnVwHmwu/pG7J/11tqy5J0CDarF3vaYydUSjIev/3+DTYhA7E3D0fsB8D/QkjeWo3f7oxEl0o78HNvXToBMLG/09daA0KEoS9R6Hpy/Oyf+fKD0ge7l9LmLy8QBu3gi4tNTCVvtldnmvLGKLaFiAv61e39m1enfnQrObidu4ycfB+B6zYwFmrrEjUvdzLy3qbxTpO0H1e10yBDXtEARgyLL/EjxbuGr/d6PHjkc5jNvivE+nQJchrVAmOBIkt6TnhSN0lLRWjJrjPXP/OTuagjyWEiclUgWrmFoCWtqRaXgO1KDzRRrEwsdBBLcN/Q3sqIvyGJJNyukRhZSoWi6P7rA5PTy2TOXjlayaHQqG+OqEXgIxHaF00Mv7lj6FEri6EFJq4Zz5+VdO9GneYW1p0blQtvNodvB8cRnlNuJSyjHv+Js4UwbejuZfOxM+cLpIngYWdPbi3obYA4VukcGzNgveERjqfLdHWv3clSyN61wv/3Tpn9yRTMrJopiPK4nWnc4va6GY8seXMMI3neI3XNj3/k44LlY2rMWRY2Bj4iu0//ZHud7BYoZm1ynxF3D5GAdH5P1k4QZLkinmotvF6UXUUjlN2hUQy1dMFGi4efcVtLL59Gu9h8z39HQczKJbivf3x+paWnE/skd/NSCslcN9u1y+mL662Vy+ArqKJrw
Steps to reproduce
In the code:
Using
v-show
on an component withdefineOptions({ inheritAttrs: false });
andv-bind="$attrs"
is resulting indisplay:none;
applied on the root div of the subcomponent (good behavior)+ the binded$attrs
div if the initialv-show
value is false (not good behavior).In the playground:
What is expected?
The
InputWithAttributes
component should be displayedWhat is actually happening?
The
InputWithAttributes
component is not displayed.The
display: none;
is applied on root div + child div withv-bind:$attrs
System Info
Any additional comments?
I think the issue could be linked with:
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.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.
The text was updated successfully, but these errors were encountered: