遇到问题,使用v-for循环数组,如下代码正常展示图片。有天,线上运营说有个数据不展示图片
<a target="_blank"
v-if="data.attachmentList == null || data.attachmentList.length == 0"
v-for="item in data.imgUrlArray" :href="item">
<img :src="data.imgUrlThumbnailArray[$index]"/>
</a>
排查好久发现,这个数据很特殊,数组中的数据是重复的,而改成不重复的就可以展示,后来发现是Vue的v-for数据重复时需要加track-by="$index",如下修改后的代码。这个问题也是真奇葩
<a target="_blank"
v-if="data.attachmentList == null || data.attachmentList.length == 0"
v-for="item in data.imgUrlArray" track-by="$index" :href="item">
<img :src="data.imgUrlThumbnailArray[$index]"/>
</a>