vue循环中点击选中再点击取消(单选)的实现

<div class="flashread_item_box_time">
      <span class="moment_time">9分钟前</span>
      <div class="flashread_item_box_zan">
       <span class="flashread_item_box_item"><i class="iconfont icon-changyongtubiao-mianxing-"></i>10</span>
       <span class="flashread_item_box_item" @click="toment(index)"><i class="iconfont icon-pinglun" :class="{showcolor:currentTab==index}"></i>10</span>
      </div>
     </div>
     <div class="ment_textareabox" :class="{'showment':currentTab==index}">
      <div class="textarea_">
       <textarea placeholder="你来谈谈？" class="ment_textarea" v-on:input="change" v-model="ment"></textarea>
       <button class="btn_ment" :class="{'showcolor':showbtn}">发表</button>
      </div>
     </div>

data(){
  return{
   currentTab:-1,
   flashreadlists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
   showbtn:false,
   ment:''
  }
 },
 methods:{
  change(){
   if(this.ment.length>=1){
    this.showbtn=true
   }else{
    this.showbtn=false
   }
  },
  toment(index){
   if(index!=this.currentTab){
    this.currentTab = index;

   }else{
    this.currentTab = -1;

   }
  }
 }

<div class="relFacilityTitcon"> 
      <i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
</div>

.padding .relWarp .relFacility .relFacilityTitcon {
 
    / border: 1px solid red; /
    / line-height: 20px; /
    padding: 0 .24rem;
    font-size :10px;
  }
 
  .padding .relWarp .relFacility .relFacilityTitcon i {
    
    / height:20px; /
    display: inline-block;
    / margin: 0 5px; /
    height: 20px;
    line-height: 20px;
    padding: 0 .16rem;
    / width: auto; /
    font-size: 10px;
    color: #97979f;
    border-radius: 5px;
    border: 1px solid #97979f;
    margin-right: 10px;
    margin-: 10px;
    font-style: normal;
 
    / padding:1px 7px; /
    / display: inline-block; /
  }
  .padding .relWarp .relFacility .relFacilityTitcon .bgcolor {
    border: 1px solid orange;
    color: orange;
  }
 
  .padding .relWarp .relFacility .relFacilityTitcon i:last-child {
    margin-right: 0;
  }

 methods: {
      
      changeSpan(index){
        let arrIndex = this.spanIndex.indexOf(index);
        // console.log(arrIndex);
        
        if(arrIndex>-1){
          this.spanIndex.splice(arrIndex,1);
        }else{
          this.spanIndex.push(index);
        }
      },