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{         }     } }}