Vue: input type="number" should not need an extra attribute “number”

[sdebacker]

It should be great if we could write

<input type="number">

in place of

<input type="number" number>

What do you think?

[Morgul]

:+1: This bit me the other day; took me 45 minutes to figure out what was going on.

[azamat-sharapov]

Sounds like "magic", maybe just warning would be helpful then?

[Morgul]

@azamat-sharapov I'm not entirely sure what about it seems "magical". I expect v-model not to mess with data types, keeping it whatever type I set. Instead, when used on an input with type="number", the input is coerced to string; not something I would expect it to do.

Thinking about it another way, I have already said, "This is a number" by declaring type="number". Why isn't that sufficient? There's no magic here; Vue is just paying attention to information the user's already given about their intentions.

[yyx990803]

@Morgul turns out <input type="number">'s raw value is... still a string. So yeah, Vue is not messing with the data type and preserving the browser's default behavior. It only casts the type when you ask for it with the number param attribute.

[Morgul]

@yyx990803 Ah, I wasn't aware of that; haven't actually worked with raw input fields in a very long time. Still, it feels like this is an obvious feature for v-model.

[azamat-sharapov]

I was calling auto-casting as "magical", because as Evan also said - it's all string. It's HTML to blame. So, if you want enhancement to standard HTML, just add Vue's number param or cast it by yourself. Just my opinion.

[yyx990803]

I think v-model should try to stay close to native behavior, and only do value conversions when the user explicitly wants it. So we'll keep the current behavior.

[Morgul]

@yyx990803 Would you be open to an alternative syntax?

<!-- Cast to number -->
<input type="number" v-model.number="foo">

<!-- Cast to boolean -->
<input type="text" v-model.boolean="bar">

This feels more in keeping with v1.0's syntax.

[yyx990803]

@Morgul That sounds like a good idea! You should open a separate issue.

[kgrosvenor]

@yyx990803 Evan please see https://github.com/vuejs/vue/issues/5731 regarding a simular issue/workaround which does not involve autocasting, but instead splicing the attribute when its a number and empty....

[zero298]

Just in case someone else stumbles across this, this is now addressed per @Morgul suggestion and documented here: Form Input Bindings/Modifiers/.number. Just hoping to save the next person the step of having to go find it in the docs themselves.

[erik127]

Thanks for the update @zero298 , I just stumbled across this. And thanks everyone for the good work

[danielgindi]

Browser's behavior is that a numeric input has an additional property valueAsNumber which should be used instead of value. And is numeric by default.