如何阻止Vuetify的v-combobox点击外部时添加输入值到模型

这个问题其实挺常见的，核心原因是v-combobox默认开启了add-on-blur属性（默认值为true），它的作用就是在组件失去焦点（比如点击外部区域）时，自动把输入框里的文本添加到绑定的模型中。要解决这个问题，有两种靠谱的方案：

方法一：使用add-on-blur prop（推荐） #

这是最直接的解决方案，只需要给<v-combobox>添加:add-on-blur="false"，就能直接阻断点击外部时自动添加输入内容的行为：

<v-combobox
  v-model="selectedValue"
  :items="options"
  label="选择一个选项"
  :add-on-blur="false"
></v-combobox>

对应的JS代码示例：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selectedValue: null,
      options: ['Vue.js', 'Vuetify', 'JavaScript']
    }
  }
})

方法二：手动处理blur事件（兼容旧版本Vuetify） #

如果你的项目使用的Vuetify版本比较旧（比如v2.x早期版本），可能没有add-on-blur这个prop，这时候可以通过监听blur事件手动控制：

<v-combobox
  v-model="selectedValue"
  :items="options"
  label="选择一个选项"
  ref="combobox"
  @blur="handleComboboxBlur"
></v-combobox>

然后在methods里添加处理逻辑：

methods: {
  handleComboboxBlur() {
    // 获取输入框的当前文本
    const inputText = this.$refs.combobox.internalValue;
    // 检查文本是否存在于选项列表中
    const isOptionValid = this.options.some(opt => opt === inputText);
    
    if (!isOptionValid) {
      // 如果不是合法选项，清空输入内容
      this.$refs.combobox.internalValue = '';
      // 也可以直接重置绑定的模型
      // this.selectedValue = null;
    }
  }
}

关于你提到的官网示例复制后出问题的原因 #

大概率是Vuetify版本差异导致的。官网示例可能使用的是较新的版本，其中add-on-blur的默认行为或者相关逻辑已经调整，而你的项目中使用的旧版本可能默认强制开启了自动添加，或者没有对应的配置项。建议检查一下项目中Vuetify的版本，尽量和官网示例保持一致，或者直接用上面的方法手动控制行为。

内容的提问来源于stack exchange，提问作者d-_-b