在Vuetify中如何获取v-select组件的选中文本值与对应id？

以下是两种常用的实现方案： #

方法1：使用return-object属性直接获取完整选中项（最简便） #

Vuetify的v-select自带return-object属性，开启后change事件会直接返回整个选中的选项对象，无需额外匹配取值：

模板代码修改： #

<div
  class="form-item"
  v-for="group in group_attributes"
  :key="group.id"
>
  <!-- option select  -->
  <v-select
    item-text="name"
    item-value="id"
    label="Select Group"
    :items="group.items"            
    return-object <!-- 新增这一行配置 -->
    @change="select_work_type"
  >
  </v-select> 
</div>

回调函数修改： #

select_work_type(selectedItem) {
  const id = selectedItem.id
  const text = selectedItem.name
  console.log(id, text)
}

注意：如果你的v-select绑定了v-model，开启return-object后v-model绑定的值也会变成完整选中对象，如果你需要保持v-model仅存储id，可以使用第二种方法。

方法2：保留原id返回逻辑，手动匹配文本值 #

如果你不想修改现有v-model的绑定规则，依然让change事件仅返回id，可以在触发事件时传入当前循环的group对象，手动匹配对应的文本值：

模板代码修改： #

<div
  class="form-item"
  v-for="group in group_attributes"
  :key="group.id"
>
  <!-- option select  -->
  <v-select
    item-text="name"
    item-value="id"
    label="Select Group"
    :items="group.items"            
    @change="(id) => select_work_type(id, group)" <!-- 同时传递选中id和当前分组对象 -->
  >
  </v-select> 
</div>

回调函数修改： #

select_work_type(id, group) {
  const selectedItem = group.items.find(item => item.id === id)
  const text = selectedItem ? selectedItem.name : ''
  console.log(id, text)
}

内容的提问来源于stack exchange，提问作者Niloy Rony