vue +elementui select

Question

<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: '全免'
            }
          ]

现在的需求是当我选中下拉选项时，我想把当前选项的code和name 分别赋值给两个input框，应该怎么设置呢

Answer 1

select组件有一个“change”事件可以用。具体思路就是，当选中时，将code，name作为参数传入，修改两个input框绑定的值。

Answer 2

这样直接设置肯定是实现不了的，可以通过绑定click事件(change事件不知绑定在option上行不行，你可以自己试试，下面也是我的一些实现想法，可供参考)，具体实现如下：

<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是传入的数据
        this.goodsFrom.DutyMode = code;
        this.goodsFrom.DutyModeName = name;
    }
}
         

Answer 3

el-select绑定的v-model，应该是el-option的value，如果取name需要在change事件中处理。

另外注意在vue中，不需要对输入框的属性赋值，直接更新对应的model对象就可以了。

<el-select v-model="goodsForm.DutyMode" placeholder="请选择" @change="handleChange">
</el-select>

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

Answer 4

select上的值是可以绑定对象的，直接把option的整个对象绑上去，然后根据需要取就可以了。

<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;
    }
}