Article Outline
v-dialog をコンポーネント化
親側のコンポーネント
<div>
<v-btn @click="openDetailDialog(item)">
<v-icon>ダイアログ表示</v-icon>
</v-btn>
<template v-if="dialog">
<div id="detail-field">
<detail-dialog :visibleItem="visibleItem" @close="closeDetailDialog" />
</div>
</template>
</div>
<script>
export default{
data() {
return {
dialog: false,
visibleItem: { properties: "", bed: "" }
};
},
methods: {
openDetailDialog(item) {
if (this.isLogin === true) {
// User is signed in.
let exData = this.getFetchExData(item);
exData = exData.length ? exData.pop() : {};
this.visibleItem = {
properties: item.properties,
bed: exData
};
this.dialog = true; //ダイアログ表示
} else {
// No user is signed in.
}
},
closeDetailDialog() {
this.dialog = false;
},
}
}
</script>ポイント
<template v-if="dialog"> を使うと false と判定された時に状態が全て消える（リセットされる）ので 、v-if を利用した方がいい。
v-show は状態が残ってしまうので、あまり使わない方がいい。
子側のコンポーネント
<div>
<v-dialog v-model="dialog">
<v-btn @click="dialog = false">
<v-icon>fa fa-times</v-icon>
</v-btn>
</v-dialog>
</div>
<script>
export default{
props: {
visibleItem: { properties: "", bed: "" },
},
data() {
return {
dialog: true,
};
},
watch: {
dialog() {
if (this.dialog) {
//ダイアログが開いた時の処理
} else {
//ダイアログが閉じたとき(falseになった時)は$emitを使って親コンポーネントに伝える
this.$emit("close");
}
}
}
</script>this.$emit("close");
で親のコンポーネント側に close を発火させる。
<detail-dialog :visibleItem="visibleItem" @close="closeDetailDialog" />
closeDetailDialog が発動する
以下を実行して、親側の dialog を閉じる
closeDetailDialog() { this.dialog = false; },
親は親でダイアログを ture false の管理して、
子は子でダイアログを ture false の管理する。
以下は$refを使っているが、$ref はどこからでも利用できるのと
子側のコンポーネントから見ると、どこのコンポーネントから変えられているのか
わかりづらい為、props を使う様にする。