DEV Community 👩‍💻👨‍💻

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

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 class="d-flex justify-content-end pt-4" v-show="!showBack">
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 (2)

valentinesean22 profile image

Hey, did you manage to solve this issue?

sushialii profile image
Ali Asgar L. Laut

I used v-if instead

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.