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]

👍 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.