v-model on number input returns incorrect values
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
Create ref, it can be a string or a number, if its on a number input the value is incorrectly modified
What is expected?
The value stays the same as the input.
What is actually happening?
The value changes, e.g. a value of 4444444444444444444444444
changes to 4.4444444444444444e+24
which is not perfect for credit cards
System Info
System:
OS: macOS 11.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 184.18 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
Chrome: 103.0.5060.134
Firefox: 91.0.2
Safari: 14.1.1
npmPackages:
vue: ^3.2.37 => 3.2.37
Any additional comments?
I have to change the input to the type of text which is terrible for mobile devices, Or i have to v-bind the value and use an input listener
Unfortunately, that's what Javascript does to a number with more than 21 digits when you convert it to a string (which happens in an input) It also happens when you do console.log('' + 4444444444444444444444444)
, for example.
There's hacky ways around that like this one: https://stackoverflow.com/a/1685917
But I'm not convinced that would be a good enough general solution for this to be in Vue core, but am open to be convinced otherwise. your example integer is bigger than Number.MAX_SAFE_INTEGER
, which is problematic in JS in multiple ways anyways.
For now it's more likely that you just need to treat big number in inputs as text, and convert them to BigInt
when you need to work with it as an actual number.