Subscribe on changes!

v-model will force cast <input type="number" /> to `number`

avatar
Sep 14th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9kc1OwzAQhF/F8iUgQSvU/yqtBKgHOAACjr6UdJOm+E/2uhRFeXfWrho4oN68M5/XM3LDb63t7QPwOc994WqLzAMGuxS6VtY4ZA1zULKWlc4olhGaCS10YbRHpnzFFtG/yGaz2XQ6nUwm4/F4NBoNh8PsUui8f1xK62hAUFauEWhiLN/eLJsmrWjbvE9TUq2DKOO3BVN2blSTXWsbkO2vldmAXAhOgOCJpkEH9QFOcELzfvcYv+LoKW9ZV72dN5qqNnGX4IVRtpbgni3W1EfwOUtO9NZSmq/HpKELcHXSiy0Un//oO3+ImuAvDjy4PQjeebh2FeDRXr09wYHOnUlNgiT6jPkK3sgQMx6xu6A3FPsPl9I+pA+rdfXuVwcE7U+lYtBItokXnD7x/kz137iD3iDdE7rl7Q+FaLZA

Steps to reproduce

  • Make a <input v-model="msg" type="number" /> where msg is a string ref
  • Input a value into it with 20 digits or more.

What is expected?

Vue should not automatically cast strings to a number when it's not appropriate.

What is actually happening?

Vue will force cast v-model to a number, even if it was originally a string and even if a number cannot represent the inputted value.

System Info

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 182.27 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.0 - /usr/local/bin/node
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.62
    Edge: 113.0.1774.57
    Safari: 16.6
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

In previous version of Vue, v-model casting to number was explicitly opt-in with the .number modifier. Now the casting is forced, with no way to opt out. This makes it seemingly impossible to show the appropriate mobile keyboard for inputs that require many digits, or inputs starting with 0.

avatar
Sep 14th 2023

I think this is expected in vue

avatar
Sep 15th 2023

Duplicate with #5284 . In addition, this was introduced in #3813 . How to modify it needs further discussion.