antd vue折叠面板v-for循环展示
发现问题
本项目用的是antd vue的组件库，在项目中用到了组件库中的Collapse折叠面板这个组件，要实现以下效果：
<div class="detail-card-content bidding-detail">
<div class="title displayflex spacebetween">
<p>衢州市半岛时尚文化创业园建设工程总承包（EPC）</p>
<span>信息时间：2020-08-08</span>
</div>
<a-collapse v-model="activeKey">
<a-collapse-panel v-for="(item, i) in details" :key="i">
<span slot="header">{
{ item.title }}</span>
<p>{
{ item.content }}</p>
</a-collapse-panel>
</a-collapse>
</div>
利用以上代码完成了这个效果，但是点击其它面板时，面板没有展开……
解决方案
查找api发现参数key要用string类型，一般我们v-for直接取的是index，为number类型，所以更改如下：
<a-collapse-panel v-for="(item, i) in details" :key="`${i}`">
</a-collapse-panel>
// 或
<a-collapse-panel v-for="(item, i) in details" :key="i.toString()`">
</a-collapse-panel>
