
在 vuetify 中,`v-combobox` 默认允许用户输入任意文本(包括不在选项列表中的值),若需严格限制仅可选择预设项,应改用 `v-autocomplete` 并禁用自由输入行为。
当业务要求下拉框必须「只允许从已有选项中选择」,而禁止用户手动输入无效内容(例如随意键入后按 Tab 或回车提交非列表项),使用
“The v-combobox component is a v-autocomplete that allows the user to enter values that do not exist within the provided items. Created items will be returned as strings.”
即:v-combobox 的核心设计目标就是支持「创建新条目」,其返回值可能是字符串(而非原始对象),这与「仅限选择」的语义相悖。
✅ 正确做法是切换为
- 移除 freeSolo(默认为 false,务必不显式设置为 true);
- 使用 v-model 绑定到选项对象(推荐)或 item-value 指定唯一键;
- 对于多选场景,配合 multiple、chips、closable-chips 等属性保持 UI 一致性。
? 示例代码(替换原 v-combobox):
立即学习“前端免费学习笔记(深入)”;
⚠️ 注意事项:
- 不要添加 free-solo 属性(或显式设为 false),否则将重新启用自由输入;
- 若 propertyItems 是对象数组,请通过 item-text 和 item-value 明确字段映射,避免 v-model 返回字符串;
- 用户输入非匹配内容时,失去焦点(如按 Tab)或提交表单时,输入框会自动清空,v-model 保持为已选有效项(或 null/[]),从而保障数据合法性;
- 如需进一步增强体验,可监听 @update:search 事件做实时校验,或结合 no-data-text 提示“无匹配项”。
? 总结:v-combobox ≠ 可控下拉选择器,它是「带搜索的可创建输入框」;而 v-autocomplete(默认 free-solo="false")才是真正的「仅限选择」解决方案。合理选用组件,比后期 hack 过滤逻辑更可靠、更符合 Vuetify 设计哲学。










