鍍金池/ 問答/HTML/ vue雙v-for數(shù)據(jù)如何分別點(diǎn)擊添加active

vue雙v-for數(shù)據(jù)如何分別點(diǎn)擊添加active

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

數(shù)據(jù)結(jié)構(gòu)是這樣的

"list": {

    "trade": {
        "title":"行業(yè)分類",
        "items":["不限","家電","3C","汽車","食品","電氣/照明","日化/化工","醫(yī)療/醫(yī)藥","五金","家具/木材","其他"]
    },
    "fn":{
        "title":"功能分類",
        "items":["不限","組裝","檢測","分揀","包裝","焊錫","涂裝","焊接","沖壓","注塑","搬運(yùn)","其他"]
    },
    "area":{
        "title":"區(qū)域",
        "items":["不限","上海市","廣東省","湖北省","江蘇省","浙江省","重慶市","天津市","山東省","北京市"]
    }
}

在點(diǎn)擊事件里怎么寫才能寫出三個(gè)分類分別添加active，而不相互影響，如果分別寫三個(gè)循環(huán)是可以達(dá)到結(jié)果預(yù)期，不過代碼蠢自己都看不下去了 求大神們幫忙看看

回答
編輯回答
情殺

scss
.class-list{

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

}

2017年5月30日 09:33
編輯回答
清夢

不知道您是不是想要這種效果，可以給每個(gè)循環(huán)的部分添加一個(gè)active圖片描述

首先可以把list組合成這種格式
list: [{

    title: '標(biāo)題1',
    items: [{
      name: '項(xiàng)目1',
      active: false
    }, {
      name: '項(xiàng)目2',
      active: false
    }]
  }, {
    title: '標(biāo)題2',
    items: [{
      name: '項(xiàng)目3',
      active: false
    }, {
      name: '項(xiàng)目4',
      active: false
    }]
  }]
  然后結(jié)構(gòu)
  <div class='class-list' 
    v-for='value in list' 
    :key='value.id'>
    <h3>{{value.title}}</h3>
    <span
        class='class-item' 
        v-for='item in value.items' 
        :class="{'active': item.active}"
        :key='item.id'
        @click='handleSortItemClick(item, value)'
    >{{item.name}}
    </span>
</div>
最后事件
handleSortItemClick(item, row) {
  row.items.forEach(item => item.active = false)
  item.active = true
}
2018年6月11日 02:11