v-showとbootstrapのFlexboxを一緒に使うとv-showが効かなくなる

• v-show は単に display:none; にするだけなので bootstrapのFlexbox(display:flex;!important) と衝突する

• Vue.js の公式リポジトリでも議論がなされている

  • v-show should be !important · Issue #3761 · vuejs/vue
  • v-show に !important を付けるような実装はしないから色々な方法で回避してねみたいなことが書いてある

• 例えば以下のような解決策がある

  • CSSに *[style*="display: none"] { display: none !important } を書く
  • 以下みたいに、classのバインディングで同じコンディションを設定する

<div v-show="someCondition" :class="{ 'd-flex': someCondition }">
    <!--content-->
</div>