如何用vue实现tab切换，且子项状态不移除 - 2019-11-29

场景：

左侧为tab列表，切换展示右侧内容区。右侧内容为列表，点击分别展开或关闭当前子项内容。但是在切换左侧tab时，右侧已经展开的子项内容状态不更改。

思路：

首先切换左侧tab需要一个变量来控制他们的状态，其次，切换右侧列表内容的状态（题干要求其他子项并不受当前子项状态的影响控制，说明控制他们的状态的变量是互不影响的）需要列表长度个状态。左侧的tab数量×右侧内容列表的个数，是我们需要的控制状态的变量的个数。打印下了左侧tab的index分别是0,1，2，······length-1,右侧的tab是0,1，2，······length-1,那么问题来了，怎么样可以吧这两个的index结合起来呢。苦于逻辑思维太差，绞尽脑汁也束手无策，好在大神提点：状态用一个二维数组控制昂！

实现：

js部分:
data:{
return{
status:[[]],
leftStatus: 0, // 用来控制左侧的状态
rightStatus: ‘’ // 用来控制右侧的状态
}
},
cretaed() {
this.initData();
},
methods: {
// 进行状态的初始化，默认全部为false
initData() {
for(let i =0; i<左测tab的长度;i++){
this.status[i] = []
for(let j=0;j<右侧内容列表个数;j++){
this.staus[i][j]=false
}
}
},
// 切换左侧tab
changeLeftTab(index){
this.leftStatus = this.leftStatus === index ? 0 : index
},
// 切换右侧的内容列表子项
changeRightTab(index){
this.rightStatus = this.rightStatus === index ? 0 : index
status[this.leftStatus][this.rightStatus] = !status[this.leftStatus][this.rightStatus]
}
}

Tips:

数据的初始化方法要与操作方法分离，做到尽量减少耦合！

bug疑云:
1.当点击当前子项列表展开，再次点击则关闭，
A:即：当被激活的状态已经是当前的index应该做一个处理:状态置为非
2.出现点击当前子项列表，js数据打印状态已更改，但是视图要在切换左侧tab时才会出现变化：
是因为vue的 this.nextTick()所致？试了下 无效果 郁闷 我再想想 想不出来就问下大神吧