如何使用 vee-validate 实现 PrimeVue InputNumber 组件的输入验证?

How can I implement input validation for the PrimeVue InputNumber component using vee-validate?

提问人:raed charrad 提问时间:11/7/2023 最后编辑:raed charrad 更新时间:11/7/2023 访问量:39

问:

无效的 prop:prop “modelValue” 的类型检查失败。值为“[object Object]”的预期字符串,得到 Object

modelValue 必须是 strinf,但 InputNumber emit 字段(对象)

这是我代码的一部分:

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

-------------------
props: {
      label: String,
      modelValue: {
        type: String,
        default: '0',
      },
}
setup(props , { emit }) {
      const internalValue = computed(
        {
          get() : number{
            return props.modelValue!='' ? parseInt(props.modelValue) : 0;
          },
          set(value : number) {
            emit("update:modelValue", value);
          },
        },
      );
  return{
     internalValue
  }
}

InputNumber 和 InputText 之间的区别在于 InputNumber 中的字段得到了” { “name”: “数字”, “value”: {“originalEvent”:“[object KeyboardEvent]”,“value”:1,“formattedValue”:0}} ” 但在 InputText 中得到” { “name”: “文本”, “value”: “测试” } "

TypeScript 验证 vuejs3 vee-validate primevue

评论


答: 暂无答案