v-showによるdisplay:noneの解除

Question

質問したいこと

v-showを用いてcssで書かれたdisplay:noneを無効にできるか。

実現したいこと

bulma(cssフレームワーク)とvue.jsを用いてmodalを実装しようとしたところ
bulmaのmodalクラスには初期からdisplay:noneが設定されていた。
このため、v-showの切り替えではうまく動かなかった。(v-ifも同様)
cssをdisplay:blockなどで上書きすれば動くが、よりスマートな方法があるか知りたいです。

cssにてdisplay:noneで非表示にした項目に対し
v-showを用いて表示の切り替えができるか。
v-showは上からdisplay:noneを付けるだけで
cssで書かれたdisplay:noneを無効にはできないのでしょうか。

Answer 1

結論

cssにてdisplay:noneで非表示にした項目に対し

v-showを用いて表示の切り替えができるか。
v-showは上からdisplay:noneを付けるだけで
cssで書かれたdisplay:noneを無効にはできないのでしょうか。

出来ないようです。Vue.js開発者のEvan Youが本質問と同様の質問に以下のように回答をしています。

No, because depending on different elements, there could be different default display properly, block is not the only possible value, so we simply set it to an empty value when v-show value is true. Also, v-show has to take into account inline display properties like style="display: inline" v-show="xxx".

https://github.com/vuejs/vue/issues/4238#issuecomment-261580863

その上で、以下、回答です。

cssをdisplay:blockなどで上書きすれば動くが、よりスマートな方法があるか知りたいです。

よりスマートかどうかはわからないですが、custom directiveを作って対応するか、display:blockで上書きするクラスを追加するかとかですかね。

以下のコードではcustom directiveをローカルインストールして使っていますけど、グローバルインストールでもOKです。

デモコード

<template>
  <div id="app">
    <p class="original" :class="{myStyle: isVisible}" v-show="isVisible">Hello</p>
    <p class="original" v-customShow="isVisible">World</p>
    <button @click="isVisible = !isVisible">Toggle</button>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      isVisible: true
    }
  },
  directives: {
    customShow (el, binding) {
      if (binding.value) {
        el.style.display = "block"
      } else {
        el.style.display = "none"
      }
      
    }
  }
};
</script>

<style>
  .original {
    display: none;
  }
  .myStyle {
    display: block;
  }
</style>

Comments

[aruto]

ありがとうございます。
やはりできないのですね。
解決方法も提示していただき、とても参考になりました。

Answer 2

既に解決済みですが、気になったので。

bulmaのmodalはクラスにis-activeを付与することで表示状態になるのは把握されていますか？
https://bulma.io/documentation/components/modal/

初期状態でmodalを表示状態にしたいのであれば、is-activeクラスを付与した状態で表示すればいいです。
また、単純にmodalの表示非表示を切り替えたいだけなのであれば、v-bind:classでis-activeクラスを切り替えられるように変数をバインドしてしまえばいいと思います。

Comments

[aruto]

ありがとうございます。
お恥ずかしながら把握しておりませんでした。
わざわざ、ややこしい手段をとっていました。
とても助かります

Answer 3

フレームワークには通じてないので的確かは分かりませんが、

<div style="display:block !important;">hidden</div>

とすることで最優先でblockが適用されるように出来ると思うのですが
汎用すると困ったことになる気がしますが