发现问题

本项目用的是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>