vue 让循环的标签单选和多选高亮？

Question

 <button v-for="(tab,index) in item" @click="choose(index)"  :class="[isActive?classA:classB]">
     {{tab.con}}
 </button>
 data () {
    return {
        item:[
            {con:'羽毛球'},
            {con:'篮球'}, 
            {con:'乒乓球'},
            {con:'排球'}
        ],
        classA:'classA',
        classB:'classB',
        isActive:false
    }
  },
  methods:{
      choose(index){
         
          this.isActive=!this.isActive ;
      }
  }

想让单选和多选高亮，并且再次点击取消高亮。现在是点击一个整体都高亮了？如何解决？是不是要for循环每个标签做判断？

Answer 1

用数组判断， 点击时候index不在添加进数组，在的话就删除 判断数组是否包含当前的然后控制activeclass

Answer 2

<button v-for="(tab,index) in item" @click="choose(tab)"  :class="[tab.isActive?classA:classB]">
     {{tab.con}}
 </button>
 data () {
    return {
        item:[
            {con:'羽毛球',isActive:false},
            {con:'篮球',isActive:false}, 
            {con:'乒乓球',isActive:false},
            {con:'排球',isActive:false}
        ],
        classA:'classA',
        classB:'classB',
        
    }
  },
  methods:{
      choose(tab){
         
          tab.isActive=!tab.isActive ;
      }
  }