vue实现多选效果，并将数据传入后台

效果如图

选中效果是通过数组中selected字段来改变的

vue文件中 template

<ul class="apontul1 paonul">
      <li v-for="(item,index) in type_array" @tap="checkboxChange(index,item.categoryName)"
      :checked="item.selected" :class="{'apon':item.selected}">
      {{item.categoryName}}</li>
    </ul>
    <!-- 我这里的类型是后台传过来的 如果是固定值替换就好-->

method中

 checkboxChange (index, name) {
        console.log('checkboxChange e:', name)
        // this.$set(this.type_array,index,!this.type_array[index].selected)
        // 动态修改数组中某个值
        if (this.type_array[index].selected == false) {
          this.type_array[index].selected = true
          Vue.set(this.type_array, index, this.type_array[index])
        } else {
          this.type_array[index].selected = false
          Vue.set(this.type_array, index, this.type_array[index])
        }
        let detailValue = this.type_array.filter(it => it.selected).map(it => it.categoryName)
        let categoryid = this.type_array.filter(it => it.selected).map(it => it.categoryid)
        let archtypeid = this.type_array.filter(it => it.selected).map(it => it.archtypeid)
        console.log('所有选中的值为：', detailValue)
        this.detailValue = detailValue
        this.archtypeid = archtypeid
        this.categoryid = categoryid
        this.$emit('detailValue', detailValue,archtypeid,categoryid)
      }```