例图.png

Q：如上图，增删改多个视频时，页面不会改变对应的视频，只有刷新页面才会更新视图
A：给video及source元素绑定单独的id，手动赋值

      <div class="img-item video-item" v-for="(item, i) in videoList" :key="i">
          <!-- 给video及source元素绑定单独的id -->
          <video :id="'refVideo-' + i" class="mini-video" controls>
              <source :id="'refOgg-' + i" :src="item.mediaPath" type="video/ogg">
              <source :id="'refMp4-' + i" :src="item.mediaPath" type="video/mp4">
              您的浏览器不支持 HTML5 video。
          </video>
          <div class="edit blue" @click="recordIndex(i)">
            <upload-file
              :isVideo="true"
              :defaultStyle="false"
              ref="uploadVideo"
              :fileFlag="'videoFile' + i"
              @fileChange="changeVideo"
            >
              <span slot="upload-text-tip">更改</span>
            </upload-file>
            <span class="cursor red" @click="deleteVideo(item, i)">删除</span>
          </div>
        </div>

<script>
// 获取视频数据
async getVideoData() {
  let res = await api.getVideoData()
  this.videoList = res.videoList 
  // 更新video视图
  this.$nextTick(() => {
     this.videoList.forEach((el, i) => {
        document.getElementById(`refVideo-${i}`).src = el.mediaPath
     })  
  })
}
</script>