Closed vmp-code-monkey closed 1 week ago
It would be nice to know how to use the useComponentBinds way of working to change the item to work as a number. Seeing a v-bind is used and not v-model one can't pass the .number as an option.
Unless there is some way.
Please go ahead an close the ticket if useField is meant to be used.
The useField is working, but now it messes up when trying to use decimals.
Is there a working example for vee-validate/vuetify with a number field?
Hey, I looked at this and have a few thoughts.
The main thing to note is v-text-input
does not emit the value as a number. So vee-validate takes whatever value got emitted and uses it for the field value. It doesn't do any casting.
Perhaps defineInputBinds
should handle casting configuration, so I will mark this as an enhancement for now till I figure out how to introduce it. So this is not a bug with vee-validate, it is up to vuetify to determine if v-text-input
should emit numbers when type=number
or not. People work around it with v-model.number
.
Or somehow for v-binds to set the v-model.number flag if at all possible - I tried looking for another way to set this without specifying v-model, but couldn't. If that makes sense.
You could in theory throw in onUpdate:modelValue
in the props and do the casting yourself.
const age = defineComponentBinds('age', (state) => ({
props: {
'error-messages': state.errors,
'onUpdate:modelValue': e => setFieldValue('age', Number(e)),
},
}));
This is just a workaround, till I figure something out.
What happened?
When using vuetify 3 & vee-validate together with a v-text-field[type=number] on submit the number is transformed into a number.
Expected behavior is that the value should be an integer.
Reproduction steps
Version
Vue.js 3.x and vee-validate 4.x
What browsers are you seeing the problem on?
Relevant log output
No response
Demo link
https://stackblitz.com/edit/vee-validate-v4-vuetify-pdghj9?file=src%2FApp.vue
Code of Conduct