实现类别多选,复点取消选择(vue,uniapp)

<template>
  <view>
    <view>商品种类</view>
    <view class="classifyBigBox">
      <view class="oneClassify flex" :class="{selectActive:selected[item.id]==true}" v-for="(item,i) in classifyList"
        @click="onSelectClassify(item.id)">
        {{item.name}}
      </view>

      <view @click="onClear">重置</view>
      <view @click="onConfirmFiltrate">确定筛选</view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        classifyList: Array.from({
          length: 10
        }).map((v, index) => {
          return {
            id: index,
            name: `菜品${index}`
          }
        }), //所以分类数组
        selected: {}, //选取的分类 ,用对象更方便存取数据
      }
    },
    methods: {
      //选取分类
      onSelectClassify(id) {
        this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
      },
      //重置
      onClear() {
        this.selected = {}
      },
      //提交筛选
      onConfirmFiltrate() {
        let select = [] //选择的筛选结果数组
        const {
          classifyList,
          selected
        } = this

        //Object.keys循环遍历对象,如果值为true,就对比所有分类数组,拿到选择的筛选数据
        Object.keys(selected).forEach(key => {
          if (selected[key]) {
            for (let i = 0; i < classifyList.length; i += 1) {
              classifyList[i].id == key ? select.push(classifyList[i]) : ''
            }

          }

        })
      }
        console.log(select ,"选择结果数组-----")

    }

  }
</script>

<style>
  .classifyBigBox {
    margin: 47rpx 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50rpx;
  }

  .oneClassify {
    display: flex;
    align-items: center;
    padding: 17rpx;
    justify-content: center;
    background: F7F7F7;
    border-radius: 13rpx;
    color: #999;
  }

  .selectActive {
    background: #FF8324;
    color: #FFFFFF;
  }
</style>

并非完整代码,其它次要样式代码没有贴出,功能实现完整复制可用