v-show can't work when component root vnode is Fragment

[agileago]

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNp9VN9v0zAQ/leOvLSTupQUkFBpisq0B0ACxPZGELLSa+fNtSPbyTpV+d+5c9IkHaxPie/Hd999vvMhWhVFXJUYzaOFy60sPCiht2kWebfPomWm5a4w1sMBNO79rcwfoIaNNTsYUdpo4Le4mcAaN1LjlSGjRu0ncGuFdtJLoyfwFbFYKVnhBHKKKD2un4FlOjfaedDlDlJGHCcXvXWVkPFZhfH4AtIlHDINBMpR7s48tsnelhjyAYR70jlsSp0zF7gTeq3wSlE/BBCyIWTGlVAlUv5GKIeNXTwKSZza/seEyFbi2AXP2FQ3lSz60mpoeC1IQQ5erGUFRoeC6aHxnZR71Z/qZf8/h0N/iL258Vbq7fiiXkwJ8Qjei9xa2oLVJSenA4i6JzGQoF7yfSRzyPkEO4ScvFv6HGWG2UnB6bOKiyl96glPidgR6dEqGUE9vLrZ+as7fzFDqZMXpT6R+J/uZue6S47dNZxxH2aa+IpShe/5kWMXUTsOdRswYJ0Sb/jIAzwnKcIAnXLvVgOkzlW5xvTwi0X8XR8l5xotHIvNmndJHfFML6bNGpMpHJ1/UuyPq0uijvZSkM60gcGiUFTYWpp+fHevczCFyKV/gsQBCocfqAhDdki8uEMcbxqMNm8Or5sUohRIRBN6VEiwjdzG985oenNCfBaxcFKh/V5wZZdFNPZN21kklDKPX4KN15kKNvb8DvOH/9jv+d2a088Piw5thVnU+bywW/SN+/rmGy30wLkz61JR9BnnT3RGlcyxCftU8pDZQVxg+zk8ibSnt+5675EEbZtiomF8Q3wW0aPH1/pS6z3dN/HbduxrUvFPhZYxScA38bs4eR/VfwH8te5l

Steps to reproduce

1. click component 1 . now the v-show should hide element
2. clicl component 2. now component1 should hide element

What is expected?

component 1 should hide the element

What is actually happening?

component 1 did not hide the element

System Info

Any additional comments?

if you change root component <></> to <div></div> . it will work perfect

[qp666]

确实如此

[LinusBorg]

This is expected. This directive needs to be put on an element. a Fragment is not an element.

[agileago]

@LinusBorg why close ? Did you read the entire code carefully? it is not the directive on the element

[agileago]

it is a real vue bug

[agileago]

const A1 = defineComponent(() => {
  const show = ref(true)

  async function handleClick() {
    show.value = false
    await nextTick()
    num.value = 2
  }

  return () => <>
    <div onClick={() => show.value = !show.value}>show.value: {show.value.toString()}</div>
    <Transition>
      <div v-show={show.value} onClick={handleClick}>comp1: click me change component 2</div>
    </Transition>
  </>
}, { name: 'A1' })

v-show is on the real element

@LinusBorg

[agileago]

reopen please

[Justineo]

The title of your issue is quite misleading. What you’re actually demonstrating is the combined use of Transition, KeepAlive, and dynamic components—not an issue with v-show failing to work just because the component’s root vnode is a Fragment. Can you try stripping away anything that might be unrelated to isolate the actual problem?

[agileago]

@Justineo
You are right, the title does not fully reflect the context, but the problem is that v-show does not work properly when the component root node is a fragment. Maybe I need to add keepalive -> transiton -> fragement -> v-show does not work properly, but it feels too long. Do you have any good suggestions?

[Justineo]

Do all the steps in this reproduction need to be in place to trigger the issue? A complex setup usually makes triaging slower.

[edison1105]

duplicate of #13153