Vuetify中item-text自定义函数导致v-combobox选择异常问题

问题原因 #

这个问题是Vuetify v-combobox 组件的内置匹配逻辑导致的：

• 未显式指定 item-value 属性时，v-combobox 默认会同时依赖 item-text 的返回结果和选项值本身做匹配校验
• 你给 item-text 传入自定义函数返回大写文本后，组件选中选项后会将输入框显示值和大写文本绑定，后续切换选项时，匹配逻辑无法把原始带小写label的item对象和当前显示的大写文本对应上，就会出现匹配失效、无法切换的问题。

解决方法 #

有两种常用的修复方案：

方案1：显式指定唯一匹配字段 #

给 v-combobox 加上 item-value 指定用id作为选项的唯一匹配依据，同时加 return-object 保证v-model绑定的还是完整的item对象：

<v-combobox
  v-model="selectedItem"
  :items="items"
  :item-text="item => item.label.toUpperCase()"
  item-value="id"
  return-object
  label="Item"
  filled
></v-combobox>

该方案不需要修改原始items数组，所有转换逻辑都在组件属性中完成。

方案2：提前处理items数组的展示文本 #

通过计算属性提前把items的label转为大写，直接用字符串形式的item-text属性：

// 在Vue实例的computed中添加处理后的选项数组
computed: {
  processedItems() {
    return this.items.map(item => ({
      ...item,
      upperLabel: item.label.toUpperCase()
    }))
  }
}

组件修改对应属性即可：

<v-combobox
  v-model="selectedItem"
  :items="processedItems"
  item-text="upperLabel"
  label="Item"
  filled
></v-combobox>

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