动态遍历数据添加绑定事件控制显隐

项目场景：点击对应的icon来显示或收起下面的内容，数据是遍历生成的

提示：这里简述项目相关背景：
业务需求：切换不同的tab不会引起其他tab的切换，要互不影响

问题描述

提示：这里描述项目中遇到的问题：因为被先前的代码解决方式的影响，导致我在解决这个问题上受到了极大的束缚，一直围绕开始的策略，先开始的数据并非遍历得到的，定义的一个@click函数直接传入对应的一个定义的值，点击取反直接得到，数据直接挂在data上面，直接通过this拿到，如下:

 <span @click="isCancel('basicShow', !basicShow)">
              <i :class=" basicShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right' " ></i>
             商品信息
  </span>

data（）{
	return{
		 basicShow: true, //是否显示基本信息的模块
 }

isCancel(key, bool) {
  this[key] = bool;
},

原因分析：

提示：这里填写问题的分析：

例如：数据如果只是单条的确可以直接进行数据的点击取反来控制，但是一旦数据是遍历生成，那么我们定义在data的数据十分多，且无法直接控制，刚开始一直陷入这个束缚，在data里面定义一个大的数组进行获取，但是实现不行，不能直接控制，后来参考了对应的文章，才走出怪圈。

---

解决方案：

提示：这里填写该问题的具体解决方案：

最后是定义在所遍历的数组中，通过item进行获取，拿到每个里面的数据进行控制就不会互相影响（这里面我还定义了一个按钮每次新增一个添加到了list里面的数据，新增也得把定义的数据用来控制的放进去）

 <div  class="box"
        v-for="(item, r) in list"
        :key="r">
         
          <div class="icon">
            <span @click="isCancel1(r)">
              <i
                :class="
                  item.basicShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
                "
              ></i>
              商品信息{{ r + 1 }}
            </span>
  			<el-button
              v-if="r == 0"
              style="position: absolute; right: 45px"
              @click="handleAddCard"
              :disabled="operateType !== 'details' ? false : true"
              >新增</el-button
            >
</div>
 list: [
        {
           basicShow: true,//控制显示
          activeName1: "first",//切换tab控制的数据
          arrivalNoticeNo: "",//本来原始数据
          cargoArrivalDate: "",//本来原始数据
          },
]
  isCancel1(index) {
      this.list[index].basicShow = !this.list[index].basicShow;
    },