Vue渲染组件时提示非原始值为key、eventKey类型校验失败如何解决

核心触发点 #

两个警告本质是同一个错误导致的：

• 你给a-select-option绑定的value值为item.branches，这个字段在你的数据源里是数组类型。ant-design-vue的a-select组件内部会将option的value作为eventKey使用，要求必须是字符串/数字类型，因此直接触发Invalid prop: type check failed for prop "eventKey"的类型校验警告。
• 部分版本的a-select如果没有显式指定option的key，会默认取value作为组件的key，数组属于非原始值，因此同时触发Avoid using non-primitive value as key的警告。你之前只修改了v-for的key，没有修正value的类型问题，所以警告仍然存在。

其他代码影响 #

同一文件中遍历branch渲染Collapse的代码和本次报错无关，这部分的key是数字类型，也没有给组件传入数组类型的必填prop，不会触发警告。

1. 修正a-select-option的value绑定
   将value改为字符串/数字类型的唯一值，比如用item的title（保证唯一的前提下），或者给每个item新增唯一id字段绑定：

<a-select
  option-filter-prop="children"
>
  <a-select-option
    v-for="(item, i) in branch"
    :key="item.title" <!-- 用唯一字符串当key，比索引更稳妥 -->
    :value="item.title" <!-- 替换原数组类型的value，符合组件类型要求 -->
  >
    <span>{{ item.title }}</span>
  </a-select-option>
</a-select>

如果业务需要选中后拿到对应的branches数组，可以在选中事件触发时，根据选中的title/id去branch数组中匹配查找对应的项即可。
2. （可选）优化Collapse组件的key
Collapse遍历部分的++index写法可以替换为唯一标识，比如外层:key="item.title"，内层遍历item.branches时:key="foo.title"，避免后续数组动态增删排序时出现渲染异常。

内容的提问来源于stack exchange，提问作者Azael Contramaestre