vue獲取checkbox input的值作為參數(shù)傳遞

如何獲得選中之后的 checkbox的name值以及激活的Input的輸入值呢

  <div v-if="form.costPointsRule == 2">
          <div class="costPointsRule">
            <el-checkbox-group v-model="checkList" @change="checkBoxList" class="checkBoxGroup">
              <el-row>
                <el-col :span="6" style="display:flex;flex-direction:column">
                  <el-checkbox v-for="item in checkLists" :key="item.id" :label="item.name" :value="item.id"></el-checkbox>
                </el-col>
                <el-col :span="14">
                  <el-form-item>
                    <el-input @input="aaa" v-model="form.exchangeInGradeList.costPoints" v-for="item in checkLists" :key="item.id" :disabled="!currentChecked.includes(item.name)" placeholder="請(qǐng)輸入消耗積分?jǐn)?shù)" class="checkInput"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
        </div>

回答

編輯回答

六扇門(mén)

<li>審核狀態(tài):
<el-radio v-model="radio" label="1" @change="radioVal1">已通過(guò)</el-radio>
<el-radio v-model="radio" label="2" @change="radioVal2">未通過(guò)</el-radio>
</li>
這是我剛剛出爐的代碼，和你的需求基本一致，你可以給這個(gè)el-radio綁定一個(gè)v-model，而每次選中的值就是label的值，或者你可以使用change事件來(lái)調(diào)用方法，而每次調(diào)用傳入的值都是label的屬性，上面你需要獲取name的值，你可以把name的值賦給label，這樣就能很輕松獲取，至于input值那就直接使用v-model來(lái)獲取。

2017年6月14日 23:38

編輯回答

半心人

報(bào)錯(cuò) TypeError: _this4.currentChecked.includes is not a function"

2018年3月3日 16:53

編輯回答

兔囡囡

//template 這里是你的模版，我給你重寫(xiě)了下
<div class="costPointsRule">
    <el-checkbox-group v-model="currentChecked" v-for="item in checkLists" :key="item.id">
        <el-row>
            <el-col :span="6" style="display:flex;flex-direction:column">
                <el-checkbox :label="item.name" @change="checkBoxList"></el-checkbox>
            </el-col>
            <el-col :span="14">
                <el-input @input="aaa" v-model="costPoints[item.name]"
                            :disabled="!currentChecked.includes(item.name)" placeholder="請(qǐng)輸入消耗積分?jǐn)?shù)" class="checkInput"></el-input>
            </el-col>
        </el-row>
      </el-checkbox-group>
</div>

//data 這里是你的數(shù)據(jù)，checkLists是按會(huì)員等級(jí)的子項(xiàng)，currentChecked是存儲(chǔ)你選中的checkbox的name值，costPoints是個(gè)對(duì)象,存儲(chǔ)你input里面的值，形式如{'普通會(huì)員':12,"一級(jí)會(huì)員":25}
checkLists:[{
    id:1,name:'普通會(huì)員'
},{
    id:2,name:'一級(jí)會(huì)員'
}],
currentChecked:[],
costPoints:{}

//methods 這是你定義的兩個(gè)方法，其實(shí)并沒(méi)有用到，不過(guò)可以打印數(shù)據(jù)，看下數(shù)據(jù)的值是如何變化的
checkBoxList(a,b){
    console.log(a,b)
},
aaa(a){
    console.log(a,this.costPoints)
}

2017年11月3日 16:08