关于在 Uniapp 中 v-for 时 index 错乱问题

在 Uniapp 中使用 v-for 是很常见的场景，但有时绑定的 key 值如果绑定不当，就会出现一些很坑壁的事情。比如，以下代码

// bad
 <view
   v-for="(item, index) in resumeInfo.job_arr"
   :key="item"
   @click="handleChooseJob(index)"
   :class="activeIndex === index ? 'active' : ''"
 >
   {{ item.slice(0, 6) }}{{ item.length > 6 ? "..." : "" }}
 </view>

// god
 <view
   v-for="(item, index) in resumeInfo.job_arr"
   :key="index"
   @click="handleChooseJob(index)"
   :class="activeIndex === index ? 'active' : ''"
 >
   {{ item.slice(0, 6) }}{{ item.length > 6 ? "..." : "" }}
 </view>

可以看到两段代码唯一不同点就是 key 绑定的不同，就是因为这个 key 会让你感到 ‘咦，为什么 H5 页面正常，到小程序里就不行了？’ 。

这种坑壁问题最关键没有任何报错提示，只会让你去怀疑是否是你的逻辑有问题。

end
导致的这种问题原因目前还不得而知，浅浅记录一下。