Vuetify 对话框每次打开时都会向 dom 添加新对话框，并且不会在关闭时删除前一个对话框答案

【问题标题】：Vuetify dialog adds new dialog to dom each time it is opened and exon't remove the previous on closeVuetify 对话框每次打开时都会向 dom 添加新对话框，并且不会在关闭时删除前一个对话框
【发布时间】：2022-01-19 10:04:24
【问题描述】：

我们有一个大规模的应用程序，但在 Vue 2、Composition API 和 Nuxt 中。

但是，我们在对话框中加载了大量内容。使用该应用程序几分钟后，您可以在 DOM 中看到这些对话框的构建。

Vuetify 有没有办法使用现有对话框而不是创建新实例。还是在关闭时删除现有的？

我在文档中看不到任何内容或其他用户的类似问题。

【问题讨论】：

一个 v-dialog 类元素将出现在您包含在模板中的每个元素的 dom 中。当你显示一个特定的 v-dialog 时，类 v-dialog-active 将被添加到它，但一个新元素不会添加一个正常的实现。
这不是真的 - 如果您打开和关闭同一个对话框，它不会重新向 dom 添加新项目。但是，如果您在应用程序中打开和关闭多个不同的对话框，它每次都会向 DOM 添加一个新项目。似乎没有任何方法可以为添加的 DOM 元素添加唯一的 id 或类。
这不是真的。你可以查看我在这个 codepen 中解释的内容：codepen.io/jssDev-/pen/wvrJbBG你能举出你的例子吗？
如果您查看图像，您可以看到重复的模态。就像我说的，我无法在 codepen 中重现这个问题。
没有。在图像中，我可以看到三个 v-dialog-content 元素，它们可能对应于三种不同的模态。如果您无法重新创建问题，则它可能与 vuejs 或 vuetify 没有严格关系。可能是您的应用程序中的任何其他脚本干扰了此 v-dialog 组件的操作。

标签： vue.js dialog vuetify.js

【解决方案1】：

每个带有v-model 的v-dialog 将在第一次激活/打开时添加到DOM，然后在后续切换时更改可见性。添加和删除 DOM 元素（大小取决于其嵌套内容）比切换活动类并添加简单的覆盖更“昂贵”。可能是为什么不建议将v-dialog 嵌套在v-for 循环中，DOM 会变得过于拥挤。如果对话框内容是可互换的，您也可以在内容切换的页面上有一个对话框。

【讨论】：