Vuetify v-text-field[type=number] turns number into string on submit

[vmp-code-monkey]

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

1. Go to https://stackblitz.com/edit/vee-validate-v4-vuetify-pdghj9?file=src%2FApp.vue
2. Change the age for the age field
3. Click submit
4. See console and that the type of the age property is a string

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-vuetify-pdghj9?file=src%2FApp.vue

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[vmp-code-monkey]

I ended up using the useField composable instead like so https://play.vuetifyjs.com/#eNqNU8tu2zAQ/BWCFzuARLZJWhSGbSiXHgq0BZpjlIMea5cNSREkpSYw/O9dkrKtOEDjiyAuZ3Z2RquHHb0zhg090AVdelBGVh7WpSZkuemsIoXrayU8MxYG0H5V0lQoaQQhbMg9PPt8I0C2qUTIkKuuBcl0r2qwSKq2wIZK9uOzpAfkAqztbK7AOcS4ERqL31PtnOFfDCAstT6VZVWDxPrd9ohdL/l0OBz4OHLtNWlk5YKggvy2pIe+R3skvZHQBOHn7KKRonlCwu9KtxJ+gYPIaiRUdkJCAg9J4uuSTwLGo2usMJ4gsTcRKZTprCc7YmFD9mRjO0Vm+G1mry57B1+Dnyy+hY90hALkmJZoUQI5gdV02gVSmvI+WsrGU5wZyatDo/nViYLJjxdBaz7D8wyvT4AxntWr1vP4sRxZrckuxVVJsH7+7f7nD+a8FXorNi8jKiO6lzIj11dRd4/PJU+hYBw0o1LoJ8f+uE7jdsZ+JW2cK+mCPKTuGL/3xi04b1qNSFw6MVimwXNtFMfsPOoVN+yGfbzmrXD+UMtxYRyL3UKrx1LvUTGFnKvKnMmmiyg9Gispdgrnd2YoEMZtr73ARWs7FYe5TbNMygycymvb/XVgsUlJs4lMGPgCqXftosab3hwFB7C5Bd2CDb/UZZbOaFNbZ1f/sTZZ2Ev8TeDFLfty0JvW33qM07Yw+K6TLq+MuNThlFN8Zp/YBy5FzVGAC3T2HGXi5obl2Wc0RoBblPKnj/8AqUvPTg==

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.

[vmp-code-monkey]

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?

[logaretm]

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.

[vmp-code-monkey]

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.

[logaretm]

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.