vue强制列表渲染重复内容track-by="$index"

　　

需求场景：

上传图片然后预览

过程：

上传图片返回图片地址，然后在一个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">

转载于:https://www.cnblogs.com/fstgshow/p/8438657.html