vue只允许点击一个div，其他不能点击

      <div class="container">
        <div class="item" v-for="(row,index) in locals" :key="index">
          <div v-for="item in row" :key="item.id"  @click="handlePick($event)" 
          class="childItem"
          ></div>
        </div>
      </div>
methods:{
      //点击选择设备位置
      handlePick(event){
       let temp = event.currentTarget;
       if(temp.className=='childItem'){  
          temp.className='childItemAfter';
        }else{
          temp.className='childItem';
          this.$message.warning('只可选择一个位置')
        }
    },

  .childItem{
    width:80px;
    height:50px;
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
  }
  .childItemAfter{
    width:80px;
    height:50px;
    background-color:#8FAAFC;
    border:1px solid red;
    border-radius:4px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
  }

想通过事件监听实现
变色不允许其他div也点击，只允许当前一个点击变颜色，怎么实现？

再定义一个变量，比如localsIndex
@click="handlePick(index)",, @click的handlePick传入index，handlePick方法内让localsIndex=index
然后class改为动态的，及class="childItem"改为:class="localsIndex === index?'childItem‘:‘childItemAfter’"
然后变色不允许其他div也点击，只允许当前一个点击变颜色也可以通过判断当前index是否等于localsIndex来实现