点击盒子切换，单选

前两天有一个点击盒子切换，单选的功能，就写一写：

<div class="dataSource">
    <div class="title">来源：</div>
       <div
         v-for="(item, index) in dataSourceList"
         :key="index"
         class="tags"
         :class="{ active: activeIndex === index }"
          @click="setActive(index, item.id, item.name)"
       >
     {{ item.name }}
   </div>
</div>

样式如下：
.active {
    color: #fff;
    background-color: #409eff;
}

  // 数据源
      activeIndex: 0, // 默认选中全部--数据源类型
      dataSourceList: [
        { name: "全部", id: "" },
        { name: "测试一", id: 1},
        { name: "测试二", id: 2 },
        { name: "测试三", id:3 },
        { name: "测试四", id:4 },
      ],

  // 数据源类型单选
    setActive(index, id, name) {
      console.log(index, dictId);
      this.activeIndex = index;
      if (name === "全部") {
        this.searchForm.dataSourceType = "";
      } else {
        this.searchForm.dataSourceType = name;
      }
    },

注意：

				这里默认选中第一个盒子（全部），只能单选