Vue: when applied on range input v-model directive use string as value type instead of number

[David-Desmaisons]

Vue.js version

2.0.1

Reproduction Link

https://jsfiddle.net/dede89/4tquo6sx/

Steps to reproduce

Given a input range with a v-model directive.
Click on the input range to change the value.

What is Expected?

After updating the type of the value should be number.

What is actually happening?

The type of the value is string.

[IgorHalfeld]

By default, when the value go to data attribute, it goes as a string.
The range input already starts as a number because v-model is now the source of truth.
To solve this, just put v-model.number="value"

PS: Hey, you're brasilian! why didn't you asks that question for us first? is not a bug xD

http://www.vuejs-brasil.com.br/

[fnlctrl]

Hi, thanks for filling this issue.
It may be surprising, but the javascript type of HTML input values, regardless of it's 'type=...' attribute, is string. This is browser behavior. https://jsfiddle.net/71ta9gsn/
(https://github.com/vuejs/vue/issues/1713#issuecomment-154776864)

To work around this, you can use .number modifier as @Halfeld suggested.

[danielgindi]

@fnlctrl This is incorrect. a type="number" input - will have a special property .valueAsNumber which should be used. Also date inputs has valueAsDate.
These are the correct native properties, as they consider the locale implicitly.

[posva]

valueAsNumber is not supported by all the browsers we support. The input with type=date isn't supported by popular browsers like Safari either. You can however create your own input implementation that uses those values on input events 🙂 Cheers.

[danielgindi]

Those are part of the HTML5 spec, and I think there's no real reason for supporting non-HTML5 browsers these days is it?
I mean a good practice would be to look forward and use polyfills for older browsers. This way Vue can conform to standards out of the box, by playing well with browser's locale etc.

But this would probably mean a new major version anyway as it's a change in behavior...

[asfarley]

Just ran into this. I understand that this is by design from the perspective of Vue developers, but from the perspective of a user, it seems like this is bound to be confusing - who would ever want to use a slider input as a string?

I would think that having Vue implicitly use v-model.value for range inputs would lead to the least amount of surprise. Just wanted to cast my 2 cents in with @danielgindi .