for循环使用element的折叠面板遇到的问题-2

需求：每次添加一个折叠面板时，让最新的折叠面板展开，其余的关闭

动态控制展开折叠面板，首先绑定name，v-model = activeName

我们的项目中是当添加折叠面板时，直接push进这个数组collapseData，循环这个数组新建折叠面板

<el-collapse accordion v-model="activeName">

      <el-collapse-item v-for="(item,index) in collapseData" :key="index" :name="index">

        <template slot="title">

          {{item.name}}

          <i class="ssf ssf-colse"  @click.stop="close(item,index)"></i>    

          <!-- 因为项目需要要在每个折叠面板右侧添加关闭按钮，这样用定位放在右侧即可 -->

        </template>

        <div>{{item.content}}</div>

      </el-collapse-item>

    </el-collapse>

需求是点击新建的时候，最新建的折叠面板展开，其余的折叠面板关闭，就需要用到activeName这个变量，当绑定的name等于activeName时即可

 methods: {
    add() {
      this.collapseData.push({
        name: "王",
        checked: false
      });
      this.activeName = Number(this.collapseData.length) - 1; //每次的activeName都等于数组的最大的值
    }
  }