Vuetify v-for循环中v-dialog多弹窗叠加、视频关闭后仍播放问题咨询

• 多弹窗叠加的触发原因：v-for循环生成的每个v-dialog组件，都绑定了同一个全局布尔值videoDialog作为开关状态，只要这个值变为true，所有循环渲染出的弹窗都会同步打开，最终形成逐层堆叠的效果。
• 关窗后视频持续播放的原因：Vuetify的v-dialog默认仅通过CSS隐藏内容，不会卸载内部DOM和子组件实例，隐藏的Video组件没有被销毁，视频流会持续在后台加载播放。
• 多视频混入弹窗的潜在原因：如果复用循环内的弹窗结构，弹窗内部的Video组件渲染逻辑会和循环作用域强绑定，一旦状态管理混乱，很容易把多个循环项的视频资源加载到同一个弹窗实例中。

整个调整的核心思路是：从结构上避免在循环内嵌套弹窗组件，全局只保留一个弹窗实例，从根源上消除多弹窗状态冲突的可能，同时配合组件销毁逻辑阻断后台视频流。

第一步：调整响应式状态 #

在原有data配置基础上，新增一个存储当前选中媒体的变量，不再让所有弹窗共用同一个布尔状态：

data: () => ({
  // 原有media数组保持不变
  media: [
    {
      id: 0,
      title: 'Exploring the culture at GSK',
      url: 'https://youtu.be/RBdgq5VTQmM'
    },
    {
      id: 1,
      title: 'The meaning of digital innovation: the pharmaphorum podcast',
      url: 'https://youtu.be/XJSWx31V3so'
    }
  ],
  videoDialog: false, // 全局唯一的弹窗开关状态
  currentMedia: {} // 存储当前选中要播放的媒体项
})

第二步：重构模板结构 #

移除循环内部嵌套的v-dialog组件，把弹窗移到循环外部，作为全局唯一的弹层实例：

<v-list>
  <!-- 循环仅渲染列表项和触发按钮 -->
  <v-list-item
    v-for="item in media"
    :key="item.id"
    class="mb-2"
  >
    <v-list-item-content>
      {{ item.title }}
    </v-list-item-content>
    <v-list-item-action>
      <!-- 按钮点击时触发弹窗打开方法 -->
      <v-btn @click="openVideo(item)">
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-list-item-action>
  </v-list-item>

  <!-- 全局唯一的v-dialog，放在循环外 -->
  <v-dialog
    v-model="videoDialog"
    persistent
    width="800px"
    :retain-focus="false"
    destroy-on-close
  >
    <v-card>
      <!-- 只有拿到有效媒体地址时才渲染Video组件 -->
      <Video
        v-if="currentMedia.url"
        :video-url="currentMedia.url"
      />
    </v-card>
    <v-card-actions>
      <v-spacer />
      <v-btn
        color="primary"
        text
        @click="videoDialog = false"
      >
        Close
      </v-btn>
    </v-card-actions>
  </v-dialog>
</v-list>

第三步：补充弹窗打开的方法 #

新增统一的弹窗触发方法，点击列表项按钮时把当前选中的媒体存入状态，再打开弹窗：

methods: {
  openVideo(selectedItem) {
    this.currentMedia = selectedItem
    this.videoDialog = true
  }
}

• 因为全程仅存在一个v-dialog实例，不存在多组件状态同步问题，不会再出现弹窗逐层叠加打开的情况。
• 弹窗内部的Video组件始终只绑定当前选中的媒体地址，不会混入其他循环项的视频资源，从机制上避免了多个视频被加载到同一个弹窗的问题。
• v-dialog配置的destroy-on-close属性，会在弹窗关闭时彻底销毁所有内部子内容，配合Video组件的v-if渲染控制，会在关窗时立刻卸载Video实例、断开视频流，彻底解决后台播放的问题。
• 弹窗仅在打开时才加载对应媒体的视频资源，不会提前加载所有列表项的视频，也能同步优化页面初始加载性能。

内容的提问来源于stack exchange，提问作者Pianoc