需求場景：

上傳圖片然後預覽

過程：

上傳圖片返回圖片地址，然後在一個div裏面顯示預覽，div是列表

v-for循環渲染的,上傳成功，返回的地址push到數據源裏面 觸發頁面渲染

問題：

當上傳一樣的圖片時候 返回了一樣的地址，這樣數據源的數組 有了相同的項，但是v-for沒有重復渲染

代碼：

<div v-for="(index,item) in upImgList" class="img-container" :style="‘background-image:url(‘+ item +‘)‘" >

</div>

上傳回調 項目裏面的

imgUpload({

picker: $(‘#up-img‘),

},function (res) {

var path = res.result.path;

VMprojectCommunication.upImgList.push(path);

})

上面代碼在項目裏面 然後path有重復的 就不會重復渲染

解決方法1

// VMprojectCommunication.upImgList.push(path + ‘?‘ + new Date().getTime());

給圖片加上時間戳地址 缺點是 圖片地址變得長

解決方法2：

循環的元素增加 track-by="$index"

<div v-for="(index,item) in upImgList" class="img-container" :style="‘background-image:url(‘+ item +‘)‘" >

</div track-by="$index">

vue強制列表渲染重復內容track-by="$index"