我有两个v-dialog v1和v2,单击v1对话框上的按钮会打开v2对话框。所以这里的问题是,当我按“ esc”按钮时,v1对话框而不是v2关闭。
在链接中找到代码:https://codepen.io/anon/pen/qzgdEg?&editable=true&editors=101
<div id="app">
<v-app id="inspire">
<div>
<v-layout row justify-center>
<v-btn color="primary" dark @click="dialog2 = true">Open Dialog 2</v-btn>
<v-menu bottom offset-y>
<template v-slot:activator="{ on }">
<v-btn v-on="on">A Menu</v-btn>
</template>
<v-list>
<v-list-tile v-for="(item, i) in items" :key="i" @click="">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-dialog v-model="dialog2" max-width="500px">
<v-card>
<v-card-title>
Dialog 2
</v-card-title>
<v-card-text>
<v-btn color="primary" dark @click="dialog3 = !dialog3">Open Dialog 3</v-btn>
<v-select
:items="select"
label="A Select List"
item-value="text"
></v-select>
</v-card-text>
<v-card-actions>
<v-btn color="primary" flat @click="dialog2=false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog3" max-width="500px">
<v-card>
<v-card-title>
<span>Dialog 3</span>
<v-spacer></v-spacer>
<v-menu bottom left>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>more_vert</v-icon>
</v-btn>
</template>
<v-list>
<v-list-tile v-for="(item, i) in items" :key="i" @click="">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-card-title>
<v-card-actions>
<v-btn color="primary" flat @click="dialog3=false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</div>
</v-app>
</div>
new Vue({
el: '#app',
data () {
return {
dialog: false,
dialog2: false,
dialog3: false,
notifications: false,
sound: true,
widgets: false,
items: [
{
title: 'Click Me'
},
{
title: 'Click Me'
},
{
title: 'Click Me'
},
{
title: 'Click Me 2'
}
],
select: [
{ text: 'State 1' },
{ text: 'State 2' },
{ text: 'State 3' },
{ text: 'State 4' },
{ text: 'State 5' },
{ text: 'State 6' },
{ text: 'State 7' }
]
}
}
})
我希望在单击“ Esc”按钮而不是v1对话框时关闭v2对话框。