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>
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)
Hey, did you manage to solve this issue?
I used v-if instead
thankd
Sadly, the same behavior is in Vuetify. All display classes use important, which makes the use of v-show impossible. :(