最近遇到了一个奇怪的问题，搞了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也可以强制刷新。可以解决折叠样式问题。
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对象的深度克隆，因为有些时候，这种方法也有缺陷