Subscribe on changes!

v-show in same HTMLElement but different Component the result is no expected

avatar
Sep 16th 2020

Version

3.0.0-rc.10

Reproduction link

https://codesandbox.io/s/sweet-benz-hm3z5 code like in Parent

<div id="app">
      <Home v-show="true" />
</div>

and Home template is

<div v-show="false">something other</div>

Steps to reproduce

click toggle button to set app.show=true

What is expected?

expected Home component invisible

What is actually happening?

now Home is visible


i think if any v-show is false, the result is invisible

avatar
Sep 16th 2020

v-show works by toggling a DOM element's display style property. Using v-show on a component implicitly applies that v-show on that component's root node. You are essentially creating two v-show with contradicting values on the same node, which doesn't make any sense.

avatar
Sep 17th 2020

I understand what v-show means. but I can't decide how users use it. So we don't recommend use v-show in root node ?