Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rvdriest opened this issue Aug 25, 2022 · 4 comments
Closed
Labels
duplicate The issue has already been reported

Comments

@rvdriest
Copy link

rvdriest commented Aug 25, 2022

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.

@felippi
Copy link

felippi commented Aug 25, 2022

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

@rvdriest
Copy link
Author

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.

@lioneaglesolutions
Copy link
Collaborator

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

@KaelWD
Copy link
Member

KaelWD commented May 3, 2023

Duplicate of #17275

@KaelWD KaelWD marked this as a duplicate of #17275 May 3, 2023
@KaelWD KaelWD closed this as not planned Won't fix, can't repro, duplicate, stale May 3, 2023
@KaelWD KaelWD added duplicate The issue has already been reported and removed S: triage labels May 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate The issue has already been reported
Projects
None yet
Development

No branches or pull requests

4 participants