vue下拉框传名字和名字id

在Vue下拉框中，你可以通过使用对象数组来传递名字和名字ID。你可以在el-option标签中使用label属性来定义显示的名字，而使用value属性来定义对应的名字ID。例如，可以按照以下方式进行设置:

<template>
<el-select v-model="value" placeholder="请选择" @change="onChange">
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>

<script>
data() {
return {
value: '', // 选中的名字ID
options: [
{ id: 1, name: '名字1' },
{ id: 2, name: '名字2' },
{ id: 3, name: '名字3' }
]
}
},
methods: {
onChange(value) {
console.log(value); // 输出选中的名字ID
}
}
</script>

在这个例子中，你可以通过v-model绑定的value属性获取到选中的名字ID，而通过@change事件监听器中的参数value来获取选中的名字ID。这样你就能够在Vue下拉框中传递名字和名字ID了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [基于vue下拉框n级联动](https://blog.csdn.net/weixin_47970316/article/details/124426143)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue 下拉框值变动事件传多个参数](https://blog.csdn.net/qq_37770674/article/details/125703494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]