Vuetify 对话框在 v-for 循环中播放两个视频

Question

我有一个 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>

... 下面我有一个媒体数组，我想循环并将 url 添加到

 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'
      }]

...

Answer 1

在你的数据中添加一个额外的属性来显示对话框：

data: () => ({
    media: [
      {
        id: 0,
        title: "Exploring the culture at GSK",
        show: false,
        url: "https://youtu.be/RBdgq5VTQmM",
      },
      {
        id: 1,
        show: false,
        title: "The meaning of digital innovation: the pharmaphorum podcast",
        url: "https://youtu.be/XJSWx31V3so",
      },
    ],

并像这样在模板中绑定 v-model：

<v-dialog
            v-model="media.show" <-----
            persistent
            width="800px"
            :retain-focus="false"
          >

在处理 show:true/false 时确保一次只有一个对话框 show:true

Vuetify 对话框在 v-for 循环中播放两个视频

Vuetify dialog plays both videos in a v-for loop

vue.js

vuetify.js