Vue如何获取下拉框中选中的value值和label值
作者：Vanllen_moon
这篇文章主要介绍了Vue如何获取下拉框中选中的value值和label值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue获取下拉框中选中的value值和label值
使用v-for循环渲染选择项，如下图例子
例子中allVillage为数组，每个数组元素是对象，对象中含有id和name
:value与v-model的值是互相绑定的，可以在data中定义变量进而直接获取到
如图，可以通过this,paneOneForm.villageId拿到value中绑定的id值
获取选中的文本值，即label值，结合使用数组的find方法
let obj = {}
obj = this.allVillage.find((item) => item.id === this.paneOneForm.villageId)
this.paneOneForm.villageName = obj.name此处paneOneForm.villageName即下拉框选中的文本label值
Vue获取下拉框的选中值以及下标
<select class="select" v-on:change="indexSelect($event)" v-model="pcNum">
<option v-for="(item, index) in pcArr" :key="index" v-bind:value="item.pcNum">{{ item.pcNum }}</option>
</select>js：
data() {
return {
pcNum:'PC20200924',
pcArr:[
{id:1, pcNum: 'PC20200924'},
{id:2, pcNum: 'PC20200925'},
{id:3, pcNum: 'PC20200926'}
],
}
},
methods:{
indexSelect(e){
console.log(e)
console.log(e.target.selectedIndex) // 选择项的index索引
console.log(e.target.value) // 选择项的value，也就是v-bind:value 的绑定值，如果换成 v-bind:value="item.id",则打印的是 选中项的id
}
}
扩展：
获取下拉框选中项的其他值，如选中蓝色妖姬时获取它的英文名 bluerose
<select class="select select2" @change="classSelect($event)" v-model="classs">
<option v-for="(item, index) in classsArr" :key="index" v-bind:value="item.name">{{ item.name }}</option>
</select>js：
data() {
return {
classs:'',
classsArr: [{name: "蓝色妖姬", table: "bluerose"}, {name: "烟叶",table: "tobaccoleaf"},{name: "佛手瓜", ?table: "chayote"}]
};
},
methods: {
classSelect(e){
var table=''
for (var i in this.classsArr) {
i=e.target.selectedIndex
table=this.classsArr[i].table
}
console.log(table)
},
}或者
<select class="select select2" @change="classSelect" ?v-model="classs"> <option v-for="item in classsArr" :key="item.table" v-bind:value="item.table" :label="item.name"></option> </select>
js：
data() {
return {
classs:'',
classsArr: [{name: "蓝色妖姬", table: "bluerose"}, {name: "烟叶",table: "tobaccoleaf"},{name: "佛手瓜", ?table: "chayote"}]
};
},
methods: {
classSelect(){
console.log(this.classs)
},
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。