【完美解决】vue单选改为多选功能问题

Question

目前的功能是单选的，现在需求是改成多选的

用户可以单选也可以多选，但是不能一个都不选就提交

请在原代码基础上修改

html部分：

.row
  p 财经新闻：
    .buttonsRight
      .item(v-for="(item,index) in taxData.caijing"
            :class="item===taxDataForm.caijing?'active':''"
            @click="taxDataForm.caijing=item") {{item}}
.row
  p 热点聚焦：
    .buttonsRight
      .item(v-for="(item,index) in taxData.redian"
            :class="item===taxDataForm.redian?'active':''"
            @click="taxDataForm.redian=item") {{item}}
.row
  p 行业资讯：
    .buttonsRight
      .item(v-for="(item,index) in taxData.hangye"
            :class="item===taxDataForm.redian?'active':''"
            @click="taxDataForm.hangye=item") {{item}}

本地数据：

taxData: {
  caijing: ["股票","科技","产业","公司","国内财经","国外财经"],
  redian: ["营改增","申报办税","税务处理","出口退税","发票管理","税收征管","企业所得税","其他"],
  hangye: ["农林牧渔业","采矿业","制造业","能源供应业","建筑业","运输仓储邮政业","信息传输软件","商业贸易","服务行业","金融业","房地产业","科技服务业","公共设施管理业","文教体育","卫生社保福利","社会及国际组织"]
    },
taxDataForm: {
  caijing: [],
  redian: [],
  hangye: []
}

Answer 1

.row
  p 财经新闻：
    .buttonsRight
      .item(v-for="(item,index) in taxData.caijing"
            :class="taxDataForm.caijing.includes(item)?'active':''"
            @click="handclick('caijing',item)") {{item}}
.row
  p 热点聚焦：
    .buttonsRight
      .item(v-for="(item,index) in taxData.redian"
            :class="taxDataForm.redian.includes(item)?'active':''"
            @click="handclick('redian',item)") {{item}}
.row
  p 行业资讯：
    .buttonsRight
      .item(v-for="(item,index) in taxData.hangye"
            :class="taxDataForm.redian.includes(item)?'active':''"
            @click="handclick('hangye',item)") {{item}}
     
            
methods:{
    handclick(str,item){
        let    arr;
        if(this.taxDataForm[str]){
            arr = this.taxDataForm[str]
        }else{return}
        arr.includes(item)?this.taxDataForm[str]=arr.filter(a=>a!==item):arr.push(item)
    }
}