Vuetify 中防止 Combobox 接受非法输入的正确实践

在 vuetify 中，`v-combobox` 默认允许用户输入任意文本（包括不在选项列表中的值），若需严格限制仅可选择预设项，应改用 `v-autocomplete` 并禁用自由输入行为。

当业务要求下拉框必须「只允许从已有选项中选择」，而禁止用户手动输入无效内容（例如随意键入后按 Tab 或回车提交非列表项），使用 是不合适的。根据 Vuetify 官方文档 明确说明：

“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 设计哲学。