DEV Community

Cover image for v-show versus .d-flex !!
ch
ch

Posted on

v-show versus .d-flex !!

While programming with Vue/Bootstrap, I was facing one case that v-show is not working unexpectedly.
In the below example, those two div elements are always visible, not based on showBack.
So I wondered, is Vue having some internal problem? :)

<div class="d-flex justify-content-between" v-show="showBack">
~~
</div>
<div class="d-flex justify-content-end pt-4" v-show="!showBack">
~~
</div>
Enter fullscreen mode Exit fullscreen mode

But finally I noticed, the reason.
v-show="false" => display: none;
.d-flex in bootstrap, => display: flex!important. omg~~

Do you have any experience like this?
With this opportunity, I noticed, that I am not still professional myself. lol

Top comments (4)

Collapse
 
valentinesean22 profile image
Valentine Sean Chanengeta

Hey, did you manage to solve this issue?

Collapse
 
sushialii profile image
Ali Asgar L. Laut

I used v-if instead

Collapse
 
stalinwesley profile image
StalinWesley

thankd

Collapse
 
wireless25 profile image
Stephan Simonett

Sadly, the same behavior is in Vuetify. All display classes use important, which makes the use of v-show impossible. :(