鍍金池/ 問答/HTML/ vue獲取checkbox input的值作為參數(shù)傳遞

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="請輸入消耗積分?jǐn)?shù)" class="checkInput"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
        </div>
回答
編輯回答
六扇門

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

2017年6月14日 23:38
編輯回答
半心人

報錯 TypeError: _this4.currentChecked.includes is not a function"

2018年3月3日 16:53
編輯回答
兔囡囡
//template 這里是你的模版,我給你重寫了下
<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="請輸入消耗積分?jǐn)?shù)" class="checkInput"></el-input>
            </el-col>
        </el-row>
      </el-checkbox-group>
</div>

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

//methods 這是你定義的兩個方法,其實并沒有用到,不過可以打印數(shù)據(jù),看下數(shù)據(jù)的值是如何變化的
checkBoxList(a,b){
    console.log(a,b)
},
aaa(a){
    console.log(a,this.costPoints)
}
2017年11月3日 16:08