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

    }

}