カテゴリー
コンピューター

Laravel 6 に構築した Vue.js 3 SPA で、 Bootstrap 4 のモーダルをラッパー SFC (シングルファイルコンポーネント) 化した例

はじめる前に

本投稿は時系列としては Laravel 6 、 Vue.js 3 の SPA で npm run production が失敗する問題を修正する – oki2a24 の続きとなります。

作ったものの構成

  • モーダルを呼び出すページを用意する。
  • モーダルに表示するコンテンツ部分を 1 つの別のコンポーネントとして作成する。このモーダルコンテンツコンポーネントから、基底となるモーダルコンポーネントを呼び出す。
  • モーダルの外側を 1 つのコンポーネントとして作成する。基底モーダルコンポーネントと呼ぶ。ここが Bootstrap 4 のモーダルをラップした部分。

使うときのポイント

  • モーダルがマウントされるのは、モーダル呼び出し元のページがマウントされる時と同じタイミングとなる点に注意。モーダル表示のタイミングで実行したいことがあるならば、モーダルのイベントを使う必要がある。
  • モーダル SFC を使うコンテンツコンポーネントで設定した HTML の id は props で与えないような構造としてしまってもよいと思った。ただし、そうするとモーダルを呼び出す側がコンテンツコンポーネントの内部に書かれている HTML id を調べに行く必要が出てくるので、やりづらさを感じる。