例图.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>
