Vue如何獲取下拉框中選中的value值和label值

更新時(shí)間：2023年10月13日 11:01:08 作者：Vanllen_moon

這篇文章主要介紹了Vue如何獲取下拉框中選中的value值和label值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue獲取下拉框中選中的value值和label值

使用v-for循環(huán)渲染選擇項(xiàng)，如下圖例子

例子中allVillage為數(shù)組，每個(gè)數(shù)組元素是對象，對象中含有id和name

:value與v-model的值是互相綁定的，可以在data中定義變量進(jìn)而直接獲取到

如圖，可以通過this,paneOneForm.villageId拿到value中綁定的id值

獲取選中的文本值，即label值，結(jié)合使用數(shù)組的find方法

let obj = {}
obj = this.allVillage.find((item) => item.id === this.paneOneForm.villageId)
this.paneOneForm.villageName = obj.name

此處paneOneForm.villageName即下拉框選中的文本label值

Vue獲取下拉框的選中值以及下標(biāo)

<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) // 選擇項(xiàng)的index索引
console.log(e.target.value) // 選擇項(xiàng)的value，也就是v-bind:value 的綁定值，如果換成 v-bind:value="item.id",則打印的是 選中項(xiàng)的id
}
}

在這里插入圖片描述

擴(kuò)展：

獲取下拉框選中項(xiàng)的其他值，如選中藍(lán)色妖姬時(shí)獲取它的英文名 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: "藍(lán)色妖姬", 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: "藍(lán)色妖姬", table: "bluerose"}, {name: "煙葉",table: "tobaccoleaf"},{name: "佛手瓜", ?table: "chayote"}]
 };
},
methods: {
classSelect(){
console.log(this.classs)
},
}

在這里插入圖片描述