vue使用笔记——video标签引用地址数据不实时更新的问题

一、问题描述

        前些天用到了h5的<video>标签实现了视频展示的功能，这一个<video>的值是某个列表数据中的一个属性，当点击查看其中一条数据后，再去查看另一条数据的详情，理论上从后台传过来的视频url地址应该是不一样的，结果取到的值确是和上一条数据同样的url，也就是<video>标签的src属性的值没有正确更新。

 

二、产生原因及解决方法

        经过搜索资料及试验，找到原因，以下列方式进行书写的video会产生数据不刷新的问题。

<div class="videoBox" v-for="(video, index) in webSiteDetail.vedieos" v-bind:key="index">
  <video class="myVideo" :src="video">
    <source :src="video" type="video/mp4"/>
    你的浏览器不支持h5标签
  </video>
</div>

        而采用以下写法则不会产生这个问题，推荐使用h5的<video>标签时使用如下写法。

<div class="videoBox" v-for="(video, index) in webSiteDetail.vedieos" v-bind:key="index">
  <video class="myVideo" :src="video">
    你的浏览器不支持h5标签
  </video>
</div>