技術標籤：vuevuejavascript

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

延伸：獲取下拉框選中項的其他值，如選中藍色妖姬時獲取它的英文名 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)
	},
}