Vue.js Vuetify对话框以v-for循环播放两个视频

我有一个v-for，它通过媒体阵列循环播放视频。当前，我的v-dialog会逐个打开两个模型。对话框关闭后，它还会继续播放视频。知道如何阻止两个视频加载到同一个对话框中吗

  <v-list>
    <v-list-item
      v-for="media in media"
      :key="media.title"
      class="mb-2"
    >
      <v-list-item-action>
          <v-dialog
            v-model="videoDialog"
            persistent
            width="800px"
            :retain-focus="false"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                v-bind="attrs"
                v-on="on"
              >
                <v-icon>mdi-open-in-new</v-icon>
              </v-btn>
            </template>
            <v-card>
              <Video
                :video-url="media.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-item-action>
    </v-list-item>
  </v-list>

---

在数据中添加一个额外的道具以显示对话框：

数据：（）=>({
媒体：[
{
id:0，
标题：“探索葛兰素史克的文化”，
秀:假,，
url:“https://youtu.be/RBdgq5VTQmM",
},
{
id:1，
秀:假,，
标题：“数字创新的意义：pharmaphorum播客”，
url:“https://youtu.be/XJSWx31V3so",
},
],

并将您的v型模型绑定到模板中，如下所示：

 data: () => ({
    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'
      }]

...