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

297 Views Asked by At

Invalid prop: type check failed for prop "modelValue". Expected String with value "[object Object]", got Object

the modelValue must be a strinf but the InputNumber emit field (an object )

here is a part of my code :

<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
  }
}

the difference between InputNumber and InputText is that field in InputNumber got " { "name": "Number", "value": {"originalEvent":"[object KeyboardEvent]","value":1,"formattedValue":0}} " but in InputText got " { "name": "Text", "value": "test" } "

0

There are 0 best solutions below