el-switch el-checkbox el-collapse等等 for循环中点击无效果问题

最近遇到了一个奇怪的问题，搞了3天，el-switch el-checkbox el-collapse等等 for循环中点击无效果。先阐述下我的数据结构吧。。但是这个数据是子组件传给父组件的，两层循环里面渲染el-switch  和el-checkbox，点击无效果。

先上页面，没调样式，有点丑啊。。各位多包涵。

packageList = [

  {

        id: 1,

        offerNum: 50013,

        pcSkuLst: [

              {

                    checkFlag: true,

                    id: 1,

                    skuNum: 5001300,

                    optionalFlag: 0

              }

        ],

        foldFlag: false

   },

  {

        id: 1,

        offerNum: 50013,

        pcSkuLst: [

              {

                    heckFlag: true,

                    id: 1,

                    skuNum: 5001301,

                    optionalFlag: 0

                 },

                  {

                        checkFlag: true,

                        id: 1,

                        skuNum: 5001301,

                        optionalFlag: 1

                  }

        ],

        foldFlag: false

      }

]

起初，用element的el-collapse组件时，因为要在自定义头部添加el-checkbox,点击checkbox时，会触发面板的折叠展开事件，内部的el-switch也不起作用。。我把el-switch等组件直接放在我的页面最外层时，单独使用data下的数据flag.效果没有问题，数据也无问题，导致我一度怀疑是element循环嵌套导致的。后来我就舍弃了element,自己div套div写折叠面板，还是两层for循环渲染，实现面板折叠展开时图标切换不起作用，

第一层循环

折叠展开按钮切换效果

但是item.foldFlag点击时已经变化了，可是页面上样式没变化，后来选择使用强制刷新packageList

changePackageFlag(){
       item.flodFlag = !item.flodFlag;

      // this.packageList.reverse().reverse();

      this.$set(this.packageList, itemIndex, item);

}

两次reverse倒置数组也可以，使用$set也可以强制刷新。可以解决折叠样式问题。

二层循环sku层

changeSkuFlag也是一样，点击没有切换效果。需要强制更新数据，使用$set对于二级循环的没有作用。。。崩溃
 changeSkuFlag(sku, skuIndex, itemIndex) {

      sku.flodFlag = !sku.flodFlag;

      console.log(sku.flodFlag);

      // this.$set(

      //      this.packageList[itemIndex],

      //      skuIndex,

      //      this.packageList[itemIndex].pcSkuLst

      // );

      this.packageList.reverse().reverse();

    },

还用那个最消耗性能的reverse吧。。可以了。二层的折叠面板能折叠了。wonderful

但是！折叠展开后的switch切换不起作用，于是也想通过强制刷新来解决，结果不尽如人意。。。

于是我把子传父的数据packageList在页面的最外层两层循环渲染el-switch也不能正常实现切换效果，直接packageList写死在data里，不通过子传父传过来，就可以实现切换，于是考虑是数据的问题了，

就把子传父的数据处理了一下。

深拷贝

然后，问题就解决了。。

想哭

最后再来说下深拷贝浅拷贝吧。
浅拷贝只是对指针的拷贝，拷贝后两个指针指向同一个内存空间，深拷贝不但对指针进行拷贝，而且对指针指向的内容进行拷贝，经深拷贝后的指针是指向两个不同地址的指针。

方法：JSON.parse(JSON.stringify(obj))
//这种方法只适用于纯数据json对象的深度克隆，因为有些时候，这种方法也有缺陷