設定用モーダルを実装するときは、モーダルを開くときにデータを読み込ませる。

いつも「そういえば！」と思うことが多いので、言語化して残しておく。

※初版のため、読みづらい点はご了承ください。

シーン

• SPAやPWAなどで画面を実装する際、Modalを開いて設定等を入力させる画面を作るケース
  • 加えて、コンポーネント指向で開発する

良き設計

• モーダル開く用の「open()」関数の処理で、初期値や設定済みの値をモーダル用コンポーネントに読み込ませるのが良い

ex. modal.vue

open(): void {
  this.param = props.param // 親からの値を取り込む
  this.isOpen = true // 自分自身を表示させる
}

コンポーネント指向で作った場合は、親コンポーネントから open() を呼ぶ形にする。

なぜ

• 「開く」タイミングだけ処理を走らせるから、不必要な処理が走らない
• Vue.js 等でいう watch や computed で変更検知を行おうとすると、不必要なときにも処理が走って無駄
  • ライフサイクルの mounted や updated などで読み込むことも考えられる。しかし、前者は最新の値を取れないケースもあるし、後者は永遠に初期値が当てられるといったケースも考えられ、色々考えることが多い