vue中使用双重v-for循环列表,点击元素设置active样式,并且互不影响

先上效果图vue中使用双重v-for循环列表,点击元素设置active样式,并且互不影响_第1张图片

思路剖析

1.给第一层级添加字段showFlag,默认值都为0
2.在切换方法中传入第一和第二层级的index,将对应外层级的showFlag的值等于内层级的index
3.在视图中的内层循环动态设置class,该class的满足条件:内层index === 外层数组list[parentIndex].showFlag

上代码

 
数据盘
{{item.size}}GB
switchDataSize(index,parentIndex){
    this.dataDiskList[parentIndex].showFlag = index
}  
最后只需要设置item-box-active的样式就好了

你可能感兴趣的:(vue中使用双重v-for循环列表,点击元素设置active样式,并且互不影响)