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>