2025-01-02 业务开发中常遇到的问题，明明数组的长度为3，为什么渲染出来却只有1条数据？==》遍历渲染采用的key值无法正确识别导致

比如你的代码为：

<div class="box">
<a-tag class="tag" closable v-for="(item, index) in arr"
:key="index">
{{ item.label }}
</a-tag>
</div>

你通过操作一个按钮，把arr的数据由原来的10条删除成了3条，这时候应该渲染3条数据，页面却是渲染了1条，你尝试把arr也打印在页面上查看，你会发现确实是3条数据；

那么是什么原因导致了这种情况呢，是下标问题，当你使用index作为下标，那么当arr发生改变时，会存在无法正确识别arr元素的情况，这就有可能导致无法正确渲染数据。

解决方案：不要使用数组的下标作为key值，选择唯一的字段来作为key即可，如果没有就自己生成或者让后端生成。