vue双v-for数据如何分别点击添加active

Question

 <div class='class-list'          v-for='(value, key) in list'          :key='key'>         <h3>{{value.title}}</h3>         <span            class='class-item'              :class='{active: index === isActive}'             v-for='(item,index) in value.items'              :key='item'             @click='handleSortItemClick(index,value)'         >{{item}}         </span>     </div>数据结构是这样的"list": {    "trade": {        "title":"行业分类",        "items":["不限","家电","3C","汽车","食品","电气/照明","日化/化工","医疗/医药","五金","家具/木材","其他"]     },    "fn":{        "title":"功能分类",        "items":["不限","组装","检测","分拣","包装","焊锡","涂装","焊接","冲压","注塑","搬运","其他"]     },    "area":{        "title":"区域",        "items":["不限","上海市","广东省","湖北省","江苏省","浙江省","重庆市","天津市","山东省","北京市"]     } }在点击事件里怎么写才能写出三个分类分别添加active，而不相互影响，如果分别写三个循环是可以达到结果预期，不过代码蠢自己都看不下去了 求大神们帮忙看看

Answer 1

scss 
.class-list{

&:first-child{
    &.active{
        h3{
        }
        span{
        }
    }
}
&:nth-child(2){
    &.active{
        h3{
        }
        span{
        }
    }
    }
&:last-child{
    &.active{
        h3{
        }
        span{
        }
    }
}

}