vue select 获取value和lable

前言:

1、这几天项目用到了vue,需要在一个form表单里添加一个下拉框，并且将下拉框的value和label的值都获取到，并插入到数据库里，

数据集合vendorListTest是从后台返回的，该部分代码省略；

2、select 默认返回value,若想返回label和value，需在select标签上添加：label-in-value="true",在它触发onchange事件时，便可以获取label和value的值。

3、更多插件详见：https://www.iviewui.com/docs/guide/install

 

xxx.vue界面

<FormItem label="厂家名称" prop="vendorName">
       <Select v-model="addForm.vendorId" :label-in-value="true" @on-change="getVendorId">
        <Option v-for="item in vendorListTest"
                :value="item.vendorId"
                :key="item.vendorId"
                :lable="item.vendorName">{{ item.vendorName }}</Option>
    </Select>
</FormItem>

 

xxx.js界面

export default {
    data() {
        return {
            vendorListTest: [
                {"vendorId":"TJ-HM-guangdaweiye","vendorName":"光大伟业"},
                {"vendorId":"TJ-HM-maituo","vendorName":"迈拓"},
                {"vendorId":"TJ-HM-weian","vendorName":"伟岸"},
                {"vendorId":"TJ-HM-zhonghuan","vendorName":"中环"},
                {"vendorId":"TJ-HUB-hanguang","vendorName":"汉光"},
                {"vendorId":"TJ-HUB-hengrui","vendorName":"恒瑞"},
                {"vendorId":"TJ-HUB-zhongsheng","vendorName":"中盛"}]
            },
        };
    },
    methods: {
        getVendorId: function (val) {
            let that = this;
            that.addForm.vendorName=val.label;//获取label
            that.addForm.vendorId=val.value;//获取value
        }

    }
   
};

效果截图