Question

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

这是我动态生成的代码。

public class AffecterChauffeurVM
{
    TitanContext db = new TitanContext();

    public List<VOITURE> ListeVoituresAffectees;   

    public int ChauffeurId { get; set; }

    [Display(Name = "Nom")]
    public String Nom { get; set; }

    [Display(Name = "Prénom")]
    public String Prenom { get; set; }

    [Display(Name = "Nom")]
    public string NomComplet { get; set; }

    [Display(Name ="Profil")]
    public string Photo { get; set; }
    public virtual AFFECTATION Affectation { get; set; }

    public AffecterChauffeurVM()
    {
        this.ListeVoituresAffectees = db.Voitures.ToList();
    }

}

点击的方法是：

[HttpPost]
    public ActionResult AffecterChauffeur(AffecterChauffeurVM AffecterChauffeurVM)
    {
        AFFECTATION Affectation = new AFFECTATION();

        using (IDAL dal = new Dal())
        {
            Affectation.NombreVoituresAffectees = dal.EnregistrerVoituresAffecteesAuChauffeur(AffecterChauffeurVM);
        }

        return View("ListeAffectationsChauffeurs", Affectation);
    }

我的页面上有多个视频，但是只有第一个视频会播放，因为它只是定位ID为“ myVideo”的第一个视频

Answer 1

您可以使用传递给该函数的默认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();
  }
}

请参见working example

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

1 个答案: