Vue Vuetify v-dialog モーダルが開いているか閉じているかの状態を取る

前提

Vue のプロジェクトなら vuetify を使って css を書かずにモーダルを作ることができる。

しかし、このコンポーネントには isOpen のような状態が見れる変数はない。

なので、開いているかどうかで処理を変えたい、例えば開いている時はリロードで警告処理をしたい、などと言った時は自分で開いているかの状態変数を設定しなければいけない。

なので実装メモ。

モーダルの状態変数の作成と開く時の処理を書く

<template v-slot:activator="{ on, }">
  <v-btn
    v-on="on"
    @click="open"
  >
    Add New Friend Data
  </v-btn>
</template>

まず、モーダルの開きを管理しているのはこの template 部分

activator はわからないが、押された時に発火する open 関数を追加した

data: () => {
  return {
    realName: '',
    nickName: '',
    isOpen: false,
  }
},

data で isOpen を false で作成して

open() {
  this.isOpen = true
  console.log(this.isOpen);
},

open() が 呼ばれたときに isOpen を true にする処理にした。

methods: などでは this でアクセスする

モーダルを閉じる時

vuetifyjs.com

vuetify 公式 api events によれば、#click:outside を仕込めば

MouseEvent で取れるらしい。

今は閉じるボタンはつけてないので、閉じる動作はこれに統一する

github.com

コードはこれを参考にする

<template v-slot:activator="{ on, }">
  <v-btn
    v-on="on"
    @click="open"
    v-click-outside="close"
  >
    Add New Friend Data
  </v-btn>
</template>

v-click-outside でモーダル外部のクリックで

閉じる関数を発火させるようにして

methods: {
  open() {
    this.isOpen = true
    console.log(this.isOpen);
  },
  close() {
    this.isOpen = false
    console.log(this.isOpen);
  }
},

閉じる関数を追加する。

これで実際に閉じたり開いたり動作をさせてみると

しっかり状態が取れている

まとめ

擬似的に Vuetify の v-dialog のモーダルが開いているか閉じているか状態変数を作るには

data で isOpen という実際の動きに合わせた状態変数を作って

methods で open, close, といった状態変数を動かす関数を作成して

モーダルの開くボタンを押すに動く @click

モーダルの外側を閉じた時に動く v-click-outside

に設定して、開いているか閉じているかわかるようにする。

問題点

実際にモーダルが開いているかの変数をここで取っているわけではなく

モーダルを開ける時の処理と閉じる時の処理に状態検知用の同じ動きをする

変数をつけただけに過ぎない。厳密にやるならば

v-model と vuex を使って外部から管理する必要がある。

  <v-dialog
    max-width="290"
    v-model = "open"
  >

こうやって v-dialog 自体に v-model をつけて管理する方法もある

しかしこれでは閉じる時に丸ごと閉じてしまう。

閉じることはできても開ける時のものが出せない。

なので vuex の値とリンクさせて、外部コンポーネントで開く処理を仕込む必要がある。外部コンポーネントはこの記事では触らないので、また別の記事に書く。