How is <v-text-field type="number" /> supposed to work?

[frederikheld]

I'm trying to use v-text-field with type="number" in order to get a proper number keyboard on mobile devices.

However, it seems to be impossible to work with this configuration.

If I type in numbers only, everything is fine, the v-model gets updated to the same value the input shows.

But if I type in non-number characters, the v-model becomes "" but the input shows whatever was typed in (including the non-number characters). So there seems to be some validation but it is not reflected in the rendering.

How can I fix this?

My preferred solution would be that the number input just does not accept any other character than [0-9].

I tried all kinds of tricks with @update:model-value but nothing really works. It would work with a default input, but then I get the full text keyboard which I do not want.

Any help appreciated!

[kingyue737]

You could try the VNumberInput, which is intended to be a replacement for the standard <input type="number"> and supports all of the standard Vuetify input variant props.

[frederikheld]

Thanks for the response! I tried VNumberInput before I went with VTextField. I'm not sure if I recall the reason correctly, but I think it was because VNumberInput only supports American format ##,###,###.## but I need German format ##.###.###,##

[J-Sek]

#21391