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

Posted fstgshow

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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">

以上是关于vue强制列表渲染重复内容track-by="$index"的主要内容,如果未能解决你的问题,请参考以下文章

vue之列表循环

v-for key

Vue-重复插入数组对象

vue中关于v-for性能优化---track-by属性

为什么v-for循环时要写上key

vue06 基础-列表渲染