鍍金池/ 問答/Linux  HTML/ 【完美解決】vue單選改為多選功能問題

【完美解決】vue單選改為多選功能問題

目前的功能是單選的，現(xiàn)在需求是改成多選的

用戶可以單選也可以多選，但是不能一個都不選就提交

請在原代碼基礎(chǔ)上修改

html部分：

.row
  p 財經(jīng)新聞：
    .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 行業(yè)資訊：
    .buttonsRight
      .item(v-for="(item,index) in taxData.hangye"
            :class="item===taxDataForm.redian?'active':''"
            @click="taxDataForm.hangye=item") {{item}}

本地數(shù)據(jù)：

taxData: {
  caijing: ["股票","科技","產(chǎn)業(yè)","公司","國內(nèi)財經(jīng)","國外財經(jīng)"],
  redian: ["營改增","申報辦稅","稅務(wù)處理","出口退稅","發(fā)票管理","稅收征管","企業(yè)所得稅","其他"],
  hangye: ["農(nóng)林牧漁業(yè)","采礦業(yè)","制造業(yè)","能源供應(yīng)業(yè)","建筑業(yè)","運輸倉儲郵政業(yè)","信息傳輸軟件","商業(yè)貿(mào)易","服務(wù)行業(yè)","金融業(yè)","房地產(chǎn)業(yè)","科技服務(wù)業(yè)","公共設(shè)施管理業(yè)","文教體育","衛(wèi)生社保福利","社會及國際組織"]
    },
taxDataForm: {
  caijing: [],
  redian: [],
  hangye: []
}

圖片描述

回答
編輯回答
陪我終
.row
  p 財經(jīng)新聞：
    .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 行業(yè)資訊：
    .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)
    }
}
2018年9月2日 05:33