Vue gets the selected value and subscript of the drop-down box

<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
     }
 }

Insert picture description here
Extension: Get the other values ​​of the item selected in the drop-down box, such as the English name bluerose when the blue demon is selected

<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)
	},
}

Insert picture description here

Guess you like

Origin blog.csdn.net/GongWei_/article/details/110947861