码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-02-10 14:56:29      阅读:486      评论:0      收藏:0      [点我收藏+]

标签:cti   project   显示   问题:   container   回调   strong   一个   gpo   

  

需求场景:

上传图片然后预览

过程:

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

标签:cti   project   显示   问题:   container   回调   strong   一个   gpo   

原文地址:https://www.cnblogs.com/fstgshow/p/8438657.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!