如何用vee-validate实现PrimeVue InputNumber输入校验？解决类型报错

问题根源 #

1. PrimeVue InputNumber的@input事件返回的是对象格式（包含originalEvent、value、formattedValue），和InputText直接返回字符串的行为不同。直接绑定vee-validate的field会导致vee-validate拿到的value是对象，与组件props中modelValue的String类型要求冲突，触发类型校验错误。
2. 组件内部computed的set方法直接emit数字类型，但props定义modelValue为String，导致父子组件数据类型不匹配。

解决方案 #

1. 手动绑定vee-validate的field属性，处理InputNumber的输入事件

不要直接v-bind="field"，拆分绑定name、value，并手动处理输入事件，从InputNumber返回的对象中提取真实数值，同步给vee-validate和组件的modelValue。

2. 修正modelValue的类型转换逻辑

确保set方法emit的是String类型，与props定义保持一致。

修改后的完整代码 #

模板部分

<Field
  v-model="internalValue"
  :name="label"
  :rules="computedRules"
  v-slot="{ field, errorMessage }"
>
  <InputNumber
    :name="field.name"
    :value="field.value"
    :label="label"
    @input="handleInput($event, field)"
  />
  <small class="p-error" id="text-error" v-if="errorMessage">{{ errorMessage || '&nbsp;' }}</small>
</Field>

Script部分

props: {
  label: String,
  modelValue: {
    type: String,
    default: '0',
  },
},
setup(props, { emit }) {
  const internalValue = computed({
    get() {
      return props.modelValue !== '' ? parseInt(props.modelValue, 10) : 0;
    },
    set(value) {
      // 转换为String类型后emit，匹配props定义
      emit('update:modelValue', value.toString());
    },
  });

  // 处理InputNumber的输入事件，同步给vee-validate和internalValue
  const handleInput = (eventObj, field) => {
    // 提取InputNumber返回的真实数值
    const numericValue = eventObj.value;
    // 调用vee-validate的field.onInput更新校验状态
    field.onInput(numericValue);
    // 更新internalValue，自动触发emit
    internalValue.value = numericValue;
  };

  return {
    internalValue,
    handleInput,
  };
}

关键改动说明 #

• 拆分field绑定：避免直接传递field对象，单独绑定name和value，防止InputNumber的事件参数与vee-validate期望的数值格式冲突。
• 自定义handleInput方法：从事件对象中提取真实数值，手动调用field.onInput更新校验状态，同时同步internalValue保证数据一致性。
• 修正set逻辑：将数值转为String后再emit，符合props中modelValue的类型要求，彻底解决类型校验错误。

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