v-show doesn't seem to work

[RohanTalip]

This doesn't work as expected for me:

<template>
  <view>
    <text v-show="false">Hide this</text>
  </view>
</template>

i.e. The "Hide this" text still shows up.

Also, the code example for v-show in the Vue Native documentation actually uses v-if: https://vue-native.io/docs/conditional.html#v-show

[RohanTalip]

Also the documentation for v-show has this text: "v-show keeps the element on the View, and only adjusts the opacity to 0%, or transparent".

It might be better to toggle between display: 'flex' and display: 'none' in the style for a component, rather than changing the opacity of the view, i.e. similar to how v-show in Vue.js works.

[icarter09]

@RohanTalip confirmed that this is an issue. Looking into applying a fix like you suggested and also looking into the test cases for v-show.

[jbarba4]

For what it's worth, I ran into this problem when attempting to use v-show to control the output of a child component that did NOT have a single top-level element. Wrapping the child component elements in a div gave me the expected behavior with v-show.

[everttrollip]

@jbarba4 I can confirm the same on my side, if I wrap this with a single top-level element, it works again as normal. Am I missing something in the docs, is there a new dependency update that causes this? Here is my code example which didn't work,

<some-custom-element v-show=someVariable></some-custom-element>

after wrapping it with a div it worked,

<div>
  <some-custom-element v-show=someVariable></some-custom-element>
</div>

Do I really require this for all elements where I use the v-show directive?

[OzzyTheGiant]

Can confirm v-show and v-if doesn't work on simple things like

or

, they have to be wrapped by a parent element, which sounds dumb