updated: 2021/6/16
通常 v-dialog は v-model で 該当コンポーネントが保持する data の値を指定する。
それによって dialog の外側をクリックしたときに表示を toggle することができる。
ここで vuex の state を指定すると外側クリック時にコンソール上にエラーが出る。
(コンポーネントから直接 vuex state の値を変更できないため)
このエラー取りの方法に関して。
solution)
vuex action から v-model に指定した state の値を変更する。
<v-dialog v-model="this.$store.state.SOMETHING" persistent @click:outside="toggleDialog">
persistent >>> 外側クリック時の default のイベントを停止
@click:outside="toggleDialog" >>> v-model の値を変更する action をマニュアルで設定
vuex側 --- 詳細は割愛
'toggleDialog' (state) {
state.SOMETHING = !state.SOMETHING
}
optional)
@otherComponent
<button @click="$store.dispatch('toggleDialog')"></button>
メリット：
v-model に vuex state を指定することで dialog の表示を別の component から操作できるようになる。
注意＊＊＊
list rendering されたcomponentにdialogを設置し、さらにnest されたdialogを設置した場合、
nest されたdialogは list1 のnest されたdialogを開いた処理をしたはずなのにlist2のnestされたdialogを開いたりなどエラーが発生するので素直にオフィシャル通りに
<template v-slot:activator="{on, attrs}">で対応する
