vue同时获取select的id和value
<template>
<div class="select1">
<select v-model="selectClassEnd" @change="selectClass($event)">
<option value="NONE">未选择</option>
<option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
{{ options.title }}
</option>
</select>
<p>{{ select_class_id }}---{{ select_class_title }}</p>
</div>
</template>
<script>
export default {
name: 'selectClass',
data() {
return {
selectClassData: [ // 类别选择数据或者从后台获取数据
{id: 1, title: '科普类'},
{id: 2, title: '亲子类'},
{id: 3, title: '制作类'},
{id: 4, title: '创意类'}
],
selectClassEnd: 'NONE', // 类别默认选择
select_class_id: '',
select_class_title: ''
}
},
methods: {
// 类别选中
selectClass(event) {
this.select_class_id = event.target.value
this.select_class_title = event.target.options[event.target.selectedIndex].text
}
}
}
</script>
<style scoped>
</style>
如有错漏,欢迎指正!谢绝转载。