需求场景:
上传图片然后预览
过程:
上传图片返回图片地址,然后在一个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">