Subscribe on changes!

v-model on number input returns incorrect values

avatar
Jul 22nd 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp1kEtqAzEMhq8itEkLHZtCV1Mn0Htok0w1zYT4gS2nFOO71860IZt45f/Bh6SCHyGoS2Yc0aQpLkEgseSwI7fY4KNAgcgzVJijt7Bp1Q05cpN3ScBle+AI2155env0nt/JGb3SG7cJYRvOe+GmAMzxdVfKP6tWo5txDRYXsoD8BN4SrjkhXAbrP/l8Z7W20TcmvuA6+mD3QZ2Sd2250oH0FyTCEa5O99pKXRMeRUIatU7z1E9ySsrHL91+KmYni2XFyQ6H6L8TxwYm7IhKrmL9BXV4bn0=

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

avatar
Jul 22nd 2022

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.

avatar
Jul 22nd 2022

Thanks for the reply, nps i love v-model and love using it, guess I could create my own input binding like the one that exists v-model.number