Vuetify，关闭Snackbar而不关闭对话框

Question

我正在尝试将对话框和小吃店与VueJS结合使用。问题如下：

预期的行为：

我应该能够在不关闭对话框的情况下关闭快餐栏

现在会发生什么：

单击小吃栏时，对话框关闭

---

这是要复制的JSFiddle：https ://jsfiddle.net/q6m2j4ae/5/

这是该问题的标记：

<v-container>
    <v-dialog v-model="displayDialog" max-width="300px">
        <v-card flat>
            This is the dialog content
        </v-card>
    </v-dialog>
    <v-snackbar
            v-model="displaySnackbar"
            :top="true"
            :right="true"
            :vertical="true"
            color="success"
    >
        Some Content
        <v-btn flat @click.stop="displaySnackbar = false">Close</v-btn>
    </v-snackbar>
</v-container>

如您所见，v-snackbar处于对话框的同一级别。我不允许将快餐栏嵌套在对话框中。但是，即使我尝试，小吃栏也不会显示。

我试过的

• 我认为stopclick事件上的修饰符@click.stop="displaySnackbar = false"足以不关闭对话框。
• 我检查了z-index应用于元素。快餐栏有一个z-index: 1000，对话框有一个z-index:200。因此，我无法调整该值。

是虫子吗？我该如何解决我手上的问题？

Answer 1

一种解决方法（如果不需要“在对话框外单击时关闭”）将属性添加persistent到对话框中。

对话框外的单击（当单击小吃栏中的关闭时）是关闭对话框的原因

Answer 2

对于仍在寻找好的解决方案的任何人：添加<div class="v-menu__content--active" style="display:none; z-index:1000;"></div>为v-snackbar. v-dialog当点击外部发生并阻止关闭时，这个技巧认为它不是活动组件。