时间戳

首页 > 解决方案 > v-for 具有相同 id 标签的动态视频会产生错误

html - v-for 具有相同 id 标签的动态视频会产生错误

问题描述

我目前正在上传一个视频文件并使用 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" 的第一个视频

标签： htmlvue.jsvideo

解决方案

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

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

<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();
  }
}

查看工作示例

推荐阅读