Tag单选高亮、传递选中的checkbox数组到后端

点击切换Tag数组

功能：点击通过for循环渲染出来的Tag标签显示高亮

1.html代码片段

<div v-for="(item,index) in groupData" :key="index">
        <span
          :class="groupCode==item.group_code?'group_choosed':'group_unchoosed'"
          @click="chooseGroupClick(index)"
        >{{item.group_name}}</span>
</div>

解析：
div：通过for循环将需要的数据渲染到对应的容器内部并显示页面
span：通过三元表达式判断是否被选中；选中添加高亮类。

js中data数据：

groupData：[
{group_code:"1",group_name:"IT"},
{group_code:"2",group_name"技术"},
{group_code:"3",group_name:"信息"},
{group_code:"4",group_name:"前端"},
{group_code:"5",group_name:"PHP"},
{group_code:"6",group_name:"后端"}
],
// 存储被选中项的index值与name
groupCode: "",
groupName: "",

js代码片段：

   chooseGroupClick(index) {
      //初始值为空 如果选中的值发生了变化  
      if (this.groupCode != this.groupData[index].group_code) {
        this.reset()   //清空数据
        this.groupCode = this.groupData[index].group_code;
        this.groupName = this.groupData[index].group_name;
        //console.log(this.groupCode);
      }
    },
      reset() {
      this.groupCode = "";
      this.groupName = "";
    },

解决checkbox复选框无法正常传递被选中数据到后端问题

问题：解决无法将选中的checkbox复选框数组传递给后端
需求：使用vue的checkbox复选框进行页面布局，将选中的复选框的值传递给后端；
项目开发遇到的问题：选中的值发生异步请求，无法正确获取被选中项
解决方案：将van-checkbox组件绑定到 this.$refs.checkbox 上

html代码片段

为van-checkbox-group组件绑定v-model属性，值为result数组，用于存储被选中的复选值
div嵌套checkout框与row包含col，此处为了方便查看代码row与col已删掉
给div绑定点击事件，用于选中的数据处理
使用三元表达式用于被选中项 ”高亮“设置
最重要的是为van-checkbox组件绑定ref="checkboxes"属性

<van-checkbox-group v-model="result" :max="10" class="checkbox_group" >
      <div  v-for="(item, index) in stationList"
            :key="index"
             @click="itemSelected(index)"
             :class="index==stationList.length-     1?'checkbox_item':'checkbox_item border-bottom'" >
        <van-checkbox
          :name="item"
          ref="checkboxes"
          shape="square"
          icon-size="16px"
          checked-color="#51a6ff"
          style="margin-right:10px;padding:2px;"
        />
      </div>
    </van-checkbox-group>

data全局变量

// 用于存储被选中的checkbox复选框数组数据
result: [],

js代码片段

 itemSelected(index) {
      this.$refs.checkboxes[index].toggle();
    },

最后一步在接口调用内部将result以参数形式传递给后台