vue +elementui select

<el-select v-model="goodsForm.DutyModeName" placeholder="請選擇">
                        <el-option
                          v-for="item in DutyArr"
                          :key="item.code"
                          :label="item.name"
                          :value="item.name">
                        </el-option>
                      </el-select>  
    <el-input v-model="goodsForm.DutyMode" type="hidden"  auto-complete="off"></el-input>
    <el-input v-model="goodsForm.DutyModeName" type="hidden"  auto-complete="off"></el-input>

data: 
DutyArr: [
            {
              code: 1,
              name: '照章征稅'
            },
            {
              code: 2,
              name: '折半征稅'
            },
            {
              code: 3,
              name: '全免'
            }
          ]

現(xiàn)在的需求是當我選中下拉選項時，我想把當前選項的code和name 分別賦值給兩個input框，應(yīng)該怎么設(shè)置呢

回答

編輯回答

淺淺

el-select綁定的v-model，應(yīng)該是el-option的value，如果取name需要在change事件中處理。

另外注意在vue中，不需要對輸入框的屬性賦值，直接更新對應(yīng)的model對象就可以了。

<el-select v-model="goodsForm.DutyMode" placeholder="請選擇" @change="handleChange">
</el-select>

methods: {
    handleChange: function(data) {
        this.goodsForm.DutyModeName  = this.DutyArr[data];
    }
}

2017年5月13日 09:40

編輯回答

萌面人

select上的值是可以綁定對象的，直接把option的整個對象綁上去，然后根據(jù)需要取就可以了。

<el-select v-model="chosenGoods" placeholder="請選擇" @click="changeSelect">
    <el-option
      v-for="item in DutyArr"
      :key="item.code"
      :label="item.name"
      :value="item">
    </el-option>
</el-select>  
    <el-input v-model="goodsForm.DutyMode" type="hidden"  auto-complete="off"></el-input>
    <el-input v-model="goodsForm.DutyModeName" type="hidden"  auto-complete="off"></el-input>

methods: {
    changeSelect(){
        this.goodsFrom.DutyMode = this.chosenGoods.code;
        this.goodsFrom.DutyModeName = this.chosenGoods.name;
    }
}

2018年2月13日 06:16

編輯回答

臭榴蓮

select組件有一個“change”事件可以用。具體思路就是，當選中時，將code，name作為參數(shù)傳入，修改兩個input框綁定的值。

2018年4月10日 02:56

編輯回答

陌南塵

這樣直接設(shè)置肯定是實現(xiàn)不了的，可以通過綁定click事件(change事件不知綁定在option上行不行，你可以自己試試，下面也是我的一些實現(xiàn)想法，可供參考)，具體實現(xiàn)如下：

<el-select v-model="goodsForm.DutyModeName" placeholder="請選擇">
    <el-option
      v-for="item in DutyArr"
      :key="item.code"
      :label="item.name"
      :value="item.name" @click="setValue(item.code,item.name)">
    </el-option>
</el-select>  
    <el-input v-model="goodsForm.DutyMode" type="hidden"  auto-complete="off"></el-input>
    <el-input v-model="goodsForm.DutyModeName" type="hidden"  auto-complete="off"></el-input>

methods: {
    setValue: function(code,name){
        //code和name就是點擊option是傳入的數(shù)據(jù)
        this.goodsFrom.DutyMode = code;
        this.goodsFrom.DutyModeName = name;
    }
}

2017年3月12日 20:02