Behavior change v-model on input type number cast value to number by defualt

[eliran-positive]

Version

3.2.26

Reproduction link

jsfiddle.net/8vqaotbx/1/

Steps to reproduce

create input element type number
the value cast to number type
On Vue version 2 it not do it by defualt , it is big chage i have big project that expected the value return is string

What is expected?

Mybe can add to core modifier numeric that not cast the value to number.
Or add flag that Vue not do it by defualt

What is actually happening?

v-model cast value of input number to number type

---

core/packages/runtime-dom/src/directives/vModel.ts

Line 52 in 9c304bf

const castToNumber =

[lidlanca]

This seem to be the a documented feature for vue 3, which is not vue 2 .

as a workaround for this use case, you can use .trim modifier to get a string

 <input type="number" v-model.trim="phoneNumber">

[eliran-positive]

@lidlanca
Thank for the replay and solution it work

But i think that the cast not need to be by default is different behavior

Also the documented in not clear "Vue can automatically convert..." mybe "Vue automatically try to convert..."

[lidlanca]

perhaps vue should not have casted by default, keep this issue open, see what core team has to say.

feel free to suggest improvement to the docs if you find the current phrasing confusing
https://github.com/vuejs/docs/issues

also note that the docs will soon be updated to this, which I find even more misleading.

source

[jacekkarczmarczyk]

This was working properly in earlier 3.x versions but then the breaking change was introduced (#3813, https://github.com/vuejs/core/blob/main/CHANGELOG.md#320-beta2-2021-07-19)

[miyukki]

I was also affected by this change.

Until now, the length of the string was used to detect that the input filed was empty.
After the change, if the input field is empty it will return a string type and if it is not empty it will return a number type.
In the case of type=number, there was a change to cast to a number as default, but the type is not unified.

[jeffgabhart]

as a workaround for this use case, you can use .trim modifier to get a string

.trim no longer works as a workaround

[IlyaSemenov]

The current behavior is unacceptable. I have a form where user is supposed to enter crypto currency amount, which is a number but has arbitrary precision (e.g. 9 decimals for SOL or 18 decimals for ETH).

Using <input type="number" v-model="value"> immediately loses precision. See this reproduction:
https://stackblitz.com/edit/vitejs-vite-vkas5ukf?file=src%2FApp.vue

Try editing the amount from 123456789.123456789 to say 223456789.123456789, you will get 223456789.12345678 instead (losing precision). Edit it back to what it was, you will get 123456789.12345679 as the result (again losing precision but differently). What is worse, the user won't notice until the data lands on the back end, because the input is correct — just the Vue model value is invalid.

I could have used <input type="text"> but then I lose HTML5 validation.

There should be a way to opt-out of converting input value to a number, e.g. with something like <input type="number" v-model.text="value">.