vue+iview+Collapse折叠面板，循环动态生成数据用v-for实现，但是生成后会出现一些bug，比如点击某一个面板点不开，或者点击后同时展开多个，接下来我们开始描述如何解决这些问题。
效果图：
<template><div><Collapse v-model="value1"><Panel v-for="(item,i) in panelList" :name="i + ''" :key="'title'+i">{
{
item.name}}<Button size="small" class="collapseBtn" @click="delPanel(i)">X</Button><div slot="content">{
{
item.content}}</div></Panel></Collapse><Button size="small" @click="addPanel">增加一行</Button></div></template>
<script>export default {
name: "customFormConfig",data(){
return{
value1: ['0'],panelList:[{
name: 'Vue-Json代码高亮插件', content: 'vue-json-pretty是一个将 JSON 字符串渲染成树形结构的 Vue 组件。 [用法地址](https://blog.csdn.net/qq_37656005/article/details/119668130)'},{
name: 'vue + gojs实现工业组态绘制', content: '通过从左侧拖拽区拖拽图片到中间画布区，之后可对此图标进行大小尺寸调整，旋转，删除，绑定等操作进行合理布局亦可以在它里面添加各种交互行为，包括：拖拽、复制、粘贴、选择、鼠标右键事件、剪切、文本编辑、删除、撤销、查看信息、模板、数据源绑定、事件处理程序、调色板、自动布局、添加画布或者节点的监听事件等操作。[用法地址](https://blog.csdn.net/qq_37656005/article/details/110518189)'},{
name: 'vlc连接视频(摄像头)方法', content: 'VLC 是一款自由、开源的跨平台多媒体播放器及框架，可播放大多数多媒体文件，以及 DVD、音频 CD、VCD 及各类流媒体协议。[用法地址](https://blog.csdn.net/qq_37656005/article/details/114369312)' }]}},methods: {
addPanel(){
this.panelList.push({
name: '我是第' + this.panelList.length + '行数据',content: '我是第' + this.panelList.length + '行数据的内容'})},delPanel(i){
setTimeout(()=>{
let index = this.value1.indexOf(i + '');if(index != -1){
this.value1.splice(index,1);}},100);this.panelList.splice(i,1);},}}
</script><style>
.collapseBtn {
float: right;margin: 7.5px 5px 0 5px;
}
</style>
上述代码是正确的，规避了前面说的一些坑。
接下来说一说为什么出现bug
问题1： 新增加一行，点击出现点不开效果
现在可以试着将 v-for="(item,i) in panelList" :name=“i + ‘’” :key="‘title’+i"这句代码 里面:name去掉，然后点击“增加一行”按钮，再点击新增加的这一行，就会出现点不开，因为name代表当前面板的标识，要将其设为是唯一的
问题2：点击删除按钮，同时触发panel展开事件
这是因为我把删除按钮放在了panel的标题上，如果不在这个位置，就不会出现这个问题
接下来说一下我的解决办法：
在Collapse 上绑定 v-model=“value1” （可以打印一下value1的数据）然后点击删除的时候，先去判断value1里面是否存在点击的这行，如果存在先删除value1里面数据，再删除panelList数据（value1里面存储的是panel展开的下标数组）
仅用于个人遇到的一些问题的记录，如果小伙伴们遇到其他问题，可以一起讨论哦~