vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][2.6.7] v-text-field issue with v-model.number and decimals

Open rvdriest opened this issue 3 years ago • 2 comments

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.

rvdriest avatar Aug 25 '22 11:08 rvdriest

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')

felippi avatar Aug 25 '22 16:08 felippi

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.

rvdriest avatar Aug 25 '22 18:08 rvdriest

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

lioneaglesolutions avatar May 03 '23 11:05 lioneaglesolutions

Duplicate of #17275

KaelWD avatar May 03 '23 11:05 KaelWD