Vue.jsのmodalにうまくCSSが効かなかった話

Vue.jsのmodal

こんにちは。最近Vue.jsを書いている学生のwebエンジニアです。
動的にsession管理するために、Vue.jsでmodal使いたいよねという話になり、ごねごね書いていましたが、いきなりcssが効かなくなり、こんな画面になってしまった。。（一応ぼかしいれますがご了承ください）

高さが足りなくて「作成」ボタンが埋もれてしまった、、、

CSSが効いていないときのコード

Modal.vue

<script>
import ~

export default {
  props: {
    省略
  },
  data() {
   return{};
  },
  methods: {
    showModal() {
      this.$modal.show(
        CreateUserModal,
        { UserId: this.UserId },
        { NameLists: this.NameLists },
        { name: "CreateUserModal", height: "800", scrollable: true }
      );
    }
  },
  created() {}
};
</script>

このコードだと最初みたいな画像のmodalになってしまう、

解決方法

Modal_.vue

<script>
import ~

export default {
  props: {
    省略
  },
  data() {
   return{};
  },
  methods: {
    showModal() {
      this.$modal.show(
        CreateUserModal,
        // ここを変える
        { UserId: this.UserId,
          NameLists: this.NameLists },
        { name: "CreateUserModal", height: "800", scrollable: true }
      );
    }
  },
  created() {}
};
</script>

show()は`第一引数にプロパティ、第二引数にcssを書かないと適用されないらしい。引数追加しすぎて、第三引数に書いていたのが問題でした。

こんな感じに修正！

参考
[vue-modal公式ドキュメント]
(https://www.npmjs.com/package/vue-js-modal)

まとめ

公式ドキュメントをしっかり読もう