Vue中使用vue-youtube包在v-for循环内如何获取每个YouTube视频时长

错误原因 #

1. 单一时长变量冲突：你在data中仅定义了一个全局的time字段，所有循环渲染的视频都绑定了同一个值，最终所有位置显示的时长都会被最后一个计算完成的结果覆盖。
2. 事件逻辑对应关系错误：每个YouTube组件触发ready事件时，你都遍历了所有已存在的refs拉取全量视频时长，没有把时长和对应的视频索引绑定，无法匹配到每个视频对应的显示位置。

修复方案 #

1. 模板调整

取消全局time绑定，改为按索引匹配时长，同时给ready事件传递当前视频的索引：

<div v-for="(review, index) in reviews" :key="index">
   <youtube
      :video-id="video"
      :width="420"
      @ready="(player) => ready(player, index)"
    ></youtube>
    <div>
      {{ durationList[index] || '00:00' }}
    </div>
</div>

2. 逻辑调整

用数组存储每个索引对应的视频时长，直接读取当前触发事件的player数据，不需要遍历所有refs：

data(){
  return {
    // 按索引存储每个视频的时长
    durationList: []
  }
},
methods: {
  ready(player, index) {
    // 直接调用当前player的方法获取时长，存到对应索引位置
    player.getDuration().then((result) => {
      this.durationList[index] = this.videoDuration(result);
    });
  },
  videoDuration(time) {
    time = Math.round(time);
    let minutes = Math.floor(time / 60);
    let seconds = time - minutes * 60;

    seconds = seconds < 10 ? "0" + seconds : seconds;
    minutes = minutes < 10 ? "0" + minutes : minutes;

    return minutes + ":" + seconds;
  },
}

如果你的reviews数组允许扩展字段，也可以直接把时长挂载到对应review对象上，不用单独维护durationList：

// ready方法内替换为
player.getDuration().then((result) => {
  this.$set(this.reviews[index], 'duration', this.videoDuration(result))
})

模板直接绑定{{ review.duration || '00:00' }}即可。

内容的提问来源于stack exchange，提问作者ST80