数据由两层v-for循环嵌套渲染,但是在APP端发现一个奇怪的问题:
内层循环未结束时,外层循环的索引却变化了。
问题偶然出现在外层循环的第2次和第5次循环中,其他次数都正常。
且比较有规律:
比如第二次循环时,外层循环索引为1,当内层循环索引到9,在下次循环应该为10时,外层循环索引却变成11,内层循环索引重新从0开始了;当内层循环索引到9,下次循环外层索引却变成12,内层索引又从0开始了。
内存循环数组数据量为22
只是发生在个别外层循环中,其他循环却正常。
同样的数据在浏览器H5端展示是正常的。不知道有人遇到过这样的问题没?
百思不得其解,代码并没有复杂的逻辑,就是简单的两层循环,不明白出现这种现象的原因。
<view class="td-data" :key="item.jctjdID" v-for="item in baseInfo">
<view class="jct-data row" :key="data.recordID" v-for="data in dataMap[item.jctjdID]">
<!-- 内层只是展示data的信息 -->
</view>
</view>
通过调试发现,是因为默认生成的_id冲突导致:
错误开始的位置id为27-110,110代表第1列的第10个元素,而后面生成的数据也出现了27-110,表示第11列的第0个元素,进而导致了第1列的第10个数据被第11列的首个元素给覆盖更新了。