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) }, }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
使用element-ui table expand展开行实现手风琴效果
这篇文章主要介绍了使用element-ui table expand展开行实现手风琴效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-03-03React/vue开发报错TypeError:this.getOptions is not a function
这篇文章主要给大家介绍了关于React/vue开发报错TypeError:this.getOptions is not a function的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
这篇文章主要介绍了解决mpvue + vuex 开发微信小程序 vuex辅助函数mapState、mapGetters不可用问题,需要的朋友可以参考下2018-08-08
最新评论