Vuetify Combobox如何将用户输入的字符转为大写

你之前尝试的事件没生效，大概率是没找对Combobox的核心控制属性——search-input，它才是直接绑定输入框显示内容的变量，而v-model绑定的是最终选中的项。下面两种方法可以解决问题：

方法1：Vuetify3 + 组合式API（推荐） #

通过双向绑定search-input，配合监听实现实时转大写：

<template>
  <v-combobox
    v-model="selectedItem"
    v-model:search-input="searchText"
    :items="fruitList"
    placeholder="输入水果名称"
  ></v-combobox>
</template>

<script setup>
import { ref, watch } from 'vue'

const selectedItem = ref('')
const searchText = ref('')
const fruitList = ref(['APPLE', 'BANANA', 'CHERRY', 'DATE'])

watch(searchText, (newVal) => {
  // 避免无限循环：只有当新值不是大写时才转换
  if (newVal && newVal !== newVal.toUpperCase()) {
    searchText.value = newVal.toUpperCase()
  }
}, { immediate: true })

// 同步选中项为大写（如果需要）
watch(selectedItem, (newVal) => {
  if (newVal) selectedItem.value = newVal.toUpperCase()
})
</script>

方法2：Vuetify2选项（传统写法） #

如果用的是Vuetify2，可以监听input事件，手动修改输入框内容并处理光标位置：

<template>
  <v-combobox
    v-model="selectedItem"
    :items="fruitList"
    @input="handleInput"
    ref="comboboxRef"
    placeholder="输入水果名称"
  ></v-combobox>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: '',
      fruitList: ['APPLE', 'BANANA', 'CHERRY', 'DATE']
    }
  },
  methods: {
    handleInput(val) {
      const upperVal = val.toUpperCase()
      this.selectedItem = upperVal
      // 获取输入框DOM元素，修正显示值和光标位置
      const inputEl = this.$refs.comboboxRef.$el.querySelector('input')
      if (inputEl) {
        inputEl.value = upperVal
        // 光标保持在输入末尾，提升用户体验
        inputEl.setSelectionRange(upperVal.length, upperVal.length)
      }
    }
  }
}
</script>

关键说明 #

• 不要只依赖change事件：它仅在输入框失去焦点时触发，无法实现实时转换
• update:search-input是Vuetify3中专门用于监听搜索输入变化的事件，比通用input事件更精准
• 处理光标位置是为了避免转换大写时光标跳回输入框开头的问题

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