vue2使用element-ui的el-select选中值显示错乱

Question

查询文档的时候说要获取select选中的值，可以使用v-model做绑定。但是我不单止要选中的id，我需要把id跟name都记录下来。
然后我发现:value绑定的值就是传给v-model绑定的值，于是我把原来:value="dr.id"改成:value="dr"这样就能够把当前选中的list整条传到v-model，但是问题就来了，这样的话，无论选哪个选项，select都只显示drugs里最后一项被选中，但是v-model获取到的数据却是我刚刚选择的那一项值。

无论选择哪一项

都显示选中了最后一项 D药物

实际上change打印出来刚刚选中的是 A药物

HTML：

<el-select v-model="choosedata"  placeholder="请选择"  @change="selectchange">
    <el-option v-for="dr in drugs" :key="dr.id" :label="dr.name" :value="dr"></el-option>
</el-select>

JS：

data(){
    rutrun{
          choosedata:'',  
          drugs: [
                { id: 1, name: 'A藥物'},
                { id: 2, name: 'B藥物'},
                { id: 3, name: 'C藥物'},
                { id: 4, name: 'D藥物'}
            ]
    }
}
,methods:{
    selectchange(){
    console.log(this.choosedata.name);
    }
}

当然只要指定了:value="dr.id"或者:value="dr.name"选择器的显示就不会有问题。
但是这样就不能达到我同时获取两个值的目的了呀。

Answer 1

如果绑定的值是对象类型：需要在el-select上加上value-key属性。
value-key这里可以是name或者id

el-select

<div id="temp">
    <el-select v-model="choosedata" value-key="id" placeholder="请选择" @change="selectchange">
        <el-option v-for="dr in drugs" :key="dr.id" :label="dr.name" :value="dr"></el-option>
    </el-select>
</div>

Answer 2

我也没什么好办法 但是按照组件要求你肯定是不得不指定:value正确的值，至于你需要获取两个值建议是直接在selectchange(data)这个方法中进行data遍历查询赋值....(需要多少查多少)