这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
前言
哈喽大家好哇，欢迎来看大冰块的博客，今天我们来谈一个很常见的问题，就是选择select值的时候，获取选中值对应的id。
问题：
-
选项动态从后台获取，同时要实时获取到用户选中值的id
-
如select框有红，黄，蓝三个值，id分别为1，2，3
-
用户点击红，我要获取到红的id为1
-
用户点击黄，我要获取到黄的id为2
-
用户点击蓝，我要获取到蓝的id为3
首先问题步骤分为三步：
- 点击select框，发送请求到后台取到值data，动态渲染到页面
- 点击要选中的值，将选中的值拿去和进行遍历
- 获取选中值的id，赋值给定义好的某个变量
准备工作：
创建全局变量data，用于存放后台返回数据
创建全局变量id，用于存放获取的id值
给el-select设置如下属性：
v-model="data.name" // 用于双向绑定
@focus="function1" // 点击select框时被触发的方法
@change="function2(data.name)" // 点击要选中的值时被触发的方法
给el-option设置以下属性：
v-for="item in data" // 遍历获取到的select列表data
:key="item.id" // 使用v-for要加key，避免遍历出错
:value="item.name" // option实际值
:label="item.name" // option显示值
添加方法：
// 点击了select框
function1() {
// 发请求获取渠道下拉框的值
let res = this.axios.get("url地址");
if (res.code === 200) {
this.data = res.data; // 把获取到的数据赋给this.data
}
},
// 点击了option某一项的值
function2(val) {
// 遍历渠道列表，根据name寻找id
this.data.map((s, index) => {
if (s.name === val) {
this.id = this.data[index].id;
// 打印id，可以看到已经获取到当前选中值的id
console.log(this.id)
}
});
这种是遍历的方法，看起来有点麻烦。并且name的值不能重复，重复的话只会选择到第一个name匹配的id。所以一般常用的更简单的是：
把option的value值与id绑定，lebal与值绑定，这样用户看到的是lebal绑定的值，实际选中的直接就是id。 因为value表示的是option实际值，label表示option的显示值。
即： 给el-option设置以下属性：
v-for="item in data"
:key="item.id"
:value="item.id"
:label="item.name"
value绑定的是 item.id，然后select选框选中的直接就是需要的id了
function2(val) {
console.log(val) // 此时打印的直接就是id
}
后记
你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。关注我，前端路途一起走。嘿哈~😛
