具有相同 ID 标记的 v-for 动态视频会产生错误

Question

我目前正在上传一个视频文件，并使用 v-for 使用视频的 URL 创建视频标签。在每个标签中，我都有"myVideo"的 ID，我知道我不能在一个页面上有两个相同的 ID，但否则我如何定位正确的视频？

这是我动态制作的代码。

<video @click="playPause" v-if="card.type == 'Video'" class="card__video" :src="card.imageurl[0]" id="myVideo"></video>

点击方法是：

playPause() {
             const myVideo = document.getElementById("myVideo")
             if(myVideo.paused) {
                 myVideo.play()
             } else {
                 myVideo.pause()
             }
        }

我的页面上有多个视频，但只有第一个播放，因为它只针对第一个视频，id="myVideo"

Answer 1

可以使用传递给函数的默认event对象来访问视频元素。

这样，您可以删除分配给video元素的重复id属性。

<video @click="playPause" v-if="card.type == 'Video'" class="card__video" :src="card.imageurl[0]"></video>

playPause(event) {
  const myVideo = event.target;
  if(myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
}

查看工作示例