使用Vee-Validate 4验证Q-Select时use-input失效且值重复的解决求助

核心问题分析 #

• 值重复显示：v-bind="field" 已自动绑定 modelValue，手动添加的:model-value="value"会导致双向绑定冲突，触发重复渲染。
• use-input失效：Q-Select开启multiple+use-input时，需配置new-value-mode确保输入逻辑正常，同时重复的绑定会干扰组件原生输入行为。

修正后的代码 #

<Field
  name="options"
  rules="required"
  v-slot="{ errorMessage, field }"
>
  <q-select
    filled
    dense
    use-chips
    use-input
    multiple
    new-value-mode="add-unique"
    :options="state.options"
    label="Filled"
    v-bind="field"
    :error-message="errorMessage"
    :error="!!errorMessage"
  />
</Field>

关键调整说明 #

• 移除手动绑定的:model-value="value"：field对象已包含Vee-Validate管理的modelValue和更新事件，重复绑定会造成状态混乱。
• 添加new-value-mode="add-unique"：在多选+输入模式下，该属性控制输入新值时仅添加唯一项，同时保证use-input功能正常生效。
• 校验options结构：确保state.options是包含label和value的对象数组（如[{label: '选项1', value: '1'}, ...]），否则输入匹配逻辑会失效。

自定义输入值处理（可选） #

若需自定义输入新值的逻辑，可通过@new-value事件拦截：

<q-select
  <!-- 其他属性 -->
  @new-value="handleNewValue"
/>

对应方法实现：

const handleNewValue = (value) => {
  // 将输入值添加到选项列表
  state.options.push({ label: value, value: value });
  // 更新表单选中值
  field.value = [...field.value, value];
};

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