vue点击标签给一个class出现的问题，请各位给愚弟看一下

Question

我目前颜色和尺寸两个属性是是一下子遍历出来的导致，点击给一个样式只能6个中选一个，我想啊，颜色尺寸个选一个，有啥思路不，各位老哥

<div class="skin">
    <div v-for="(item,index) in configSpec">
        <div class="clear"></div>
        <div class="type">{{item.name}}:</div>
        <ul>
            <li v-for="(i,index) in item.list" :class='{active:currentBtn == i}' @click="checkBtn(i)">{{i}}</li>
        </ul>
    </div>
</div>
    
checkBtn(data){
    console.log(data);
    this.currentBtn === data
}

Answer 1

无非就是找6个中的唯一值

<div class="skin">
    <div v-for="(item,index) in configSpec">
        <div class="clear"></div>
        <div class="type">{{item.name}}:</div>
        <ul>
            <li v-for="(i,index1) in item.list" :class='{active:currentBtn === `${index}${index1}`}' @click="checkBtn(`${index}${index1}`)">{{i}}</li>
        </ul>
    </div>
</div>
    
checkBtn(data){
    console.log(data);
    this.currentBtn === data
}

Answer 2

<template>
<div class="skin">
  <div v-for="(item, index) in configSpec" :key="item.name">
    <div class="clear"></div>
    <div class="type">{{item.name}}:</div>
    <ul>
      <li v-for="(ele,index) in item.list" :class='{active: item.value === ele}' @click="checkBtn(ele)">{{ele}}</li>
    </ul>
  </div>
</div>
</template>


<script>
export default {
  data() {
     configSpec: [
      { name: "颜色", value: "", list: ["黄色", "黑色" , "蓝色" ] },
      { name: "尺寸", value: "", list: ["23", "24" , "25" ] },
    ]
  },
  methods: {
    checkBtn (item) {
      let find = this.configSpec.find(ele => ele.name === item )
      find.value = item
    }
  }
}
</script>

Answer 3

给对象增加一个属性来存可以吧

<div class="skin">
        <div v-for="(item,index) in configSpec">
          <div class="clear"></div>
          <div class="type">{{item.name}}:</div>
          <ul>
            <li v-for="(i,innerIndex) in item.list" :class="{active: item.current == i}" @click="checkBtn(i, index)">{{i}}</li>
          </ul>
         </div>
     </div>
     
 checkBtn(data, index){
      console.log(data);
      this.configSpec[index].current = data
 }