vue+iview+Collapse折叠面板，循环动态生成数据

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展开的下标数组）

仅用于个人遇到的一些问题的记录，如果小伙伴们遇到其他问题，可以一起讨论哦~