【完美解决】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)    }}