Subscribe on changes!

vShow and vIf has different status

avatar
Nov 21st 2023

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNp9UstuwjAQ/BXXl4IEiVpuKKA+xIEe2qpw9CWETTAktmU7AQnx7107BAilnGzPzK521rOnr0oFVQl0SCOTaK4sMWBLNWaCF0pqS+Zg7DQlqZYFeQzC+ulKHluS2UpuWyIHtGV7Demh1jCKDKNMJFIYSypu+CIHMiIo6VhdQpeJhrSaZxloJDvd0XjPBGn0QRXnpat6aAFMHJiIwtoOGsGHhULlsQV8RUbFYhwj787mHYZn4Oi46vN0hIPWrRkdR0fz/xb5HVR9g8eNQsc65aK0VgrykuQ82aDu6A91x1sU1hInDk+T0x61BjeS8ixYGynwx/wuGE1koXgO+ktZjhtjdEg847g4z+X2w2Nurb0GT1aQbG7ga7NzGKPfGgzoCsc/cTbWGdiansw+YYf3E1nIZenM3iF/wMi8dDPWsrdSLHHsC52fdurTwkU2N5OdBWEaU25Qpzx4vY/Q+x3r53EHwcDXYTBwi+cEu9D/SYZ5uoqGeb4GBmeg9T+Xsb/Zm1/35te9+c3eTNDDL8ebQmA=

Steps to reproduce

trigger button

What is expected?

component TestIf and component TestShow all can switch display status

What is actually happening?

only TestIf can switch display status

System Info

No response

Any additional comments?

I know the reason because the testShow component does not have a common parent element. In the source code, vShow sets the display attribute for style. So my code doesn't work, https://github.com/vuejs/core/blob/fc772dbf7398e8ce961025556594b4a7d3f64871/packages/runtime-dom/src/directives/vShow.ts#L27-L35 but I'm curious is there no other way to achieve this functionality? When my child component does not have a common parent element

avatar
Nov 21st 2023

You can use a custom prop that sets v-show on all elements in the child, or wrap the component in another element in the parent.

avatar
Nov 21st 2023

@LinusBorg This is not what I expected, I know that wrapping it in a component works normally. But what I expect is that when the component does not have a common parent element, vShow can also function normally