vuetify
vuetify copied to clipboard
[Bug Report][2.6.7] v-text-field issue with v-model.number and decimals
Environment
Vuetify Version: 2.6.7 Vue Version: 2.7.7 Browsers: Chrome 104.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
Try to enter 0.05 in the textfield (using a period) where the textfield is of type 'number' and the .number modifier used on the v-model.
Expected Behavior
Expected value is 0.05 with type of number
Actual Behavior
Actual value is 5 with type of number
Reproduction Link
https://jsfiddle.net/L1w4zb0n/6/
Other comments
This is only happening when using a period. When typing 0,05 with a comma, it works. It also works fine when removing type="number" but then the input type isn't number anymore. Also works when removing the .number modifier after the v-model but then the value type is a string.
A workaround is just use v-model.number without type="number", this works like Vue
<v-text-field v-model.number="value"></v-text-field>
Look: https://vuejs.org/guide/essentials/forms.html#number
I could be wrong but I believe that in your example, the value is being converted before arriving at lazyValue (from vuetify's VInput) by Vue, so when you type 0.0 it is converted to 0 which prevents typing 0.05. The example below illustrates this behavior, the parseFloat would be make by Vue.
class Fcm {
lazyValue = 0;
get internalValue() {
return this.lazyValue;
}
set internalValue(val) {
this.lazyValue = val;
console.log(`val: ${val} this.lazyValue: ${this.lazyValue}`);
}
}
let fcm = new Fcm();
fcm.internalValue = parseFloat('0.0')
Thank you @felippi for your answer. I would however like to have a number input field instead of a text input field. Currently I have a workaround where I remove the .number modifier on the v-model and use the parseFloat when submitting the form.
When I try using the .number modifier and type='number' on a native input element, it does work. It just doesn't work with the Vuetify textfield. I assume this is a bug.
I couldn't even get this to work when using a comma - probably something to do with the locale (I'm in Australia).
Using a period/decimal with your repro works as expected.
@johnleider
Duplicate of #17275