Vue: Automatically converting the value to a number when the prop's type is Number?

[airyland]

Now we have to use

:is-boolean=false  
:min=10

instead of

is-boolean=false
min=10

If we want to set the props as written above, we have to add a coerce function:

{
  type: Number,
  coerce: function (val) {
    return val * 1
  }
}

But I think the value should be automatically converted to a number when the type is Number.
If I have may number-props, then I have to add the coerce option many times.

[posva]

So the problem is that you want a number as a prop but as you're passing a static value you always get a String. In those case casting the value seems normal to me.
Let's hear what do other people think about this :smile:

[fullfs]

@airyland Hello! My guess is you are having hard time updating your app to the latest version, while you want your code to work as it is now. Or it may be the question of a habit.
To my opinion auto-converting props is a bit excessive. There are at least 3 ways of solving the problem: adding a colon to attribute, using a custom filter, a coerce function. I don't think adding an extra layer of magic is a good idea. Plus there will be new edge cases, plus it will affect performance.

[posva]

@fullfs I don't think this feature adds a magic layer as the user is specifying the prop type as Number. So he actually expects the component to receive a number but as he isn't binding any variable to the prop the value passed is always a string

[fullfs]

@posva Because static attributes are always treated as Strings. Its nice and clear. If you need a Number but don't want to bind it to some property just use a colon - it will be treated as an expression and will be converted into a Number. Same goes for Booleans. It's nice because it is explicit. Is it hard to use a colon when you need a number? :)

[fullfs]

@posva Also, it would be a breaking change. Someone may intentionally pass a number via static attribute because they want it to be a String for concatenation.

[posva]

@fullfs The user is already specifying type: Number in the prop and Vue even fires a warning for it: https://jsfiddle.net/posva/r64b3w97/

Why would you have to have to also adde the v-bind to make the type work

[fullfs]

@posva Well, because the type option is not supposed to convert values. It is validtion type. In other words, it is prop's requirement. See http://vuejs.org/guide/components.html#Prop-Validation
It could be compared to variable types in typed languages like Java/C++ or even TypeScript. Another example is jsdoc-comments for methods. You define param types a function awaits to receive while the function could not work properly if you passed an incorrect type. For that purpose vue raises a warning when you try to pass incorrect prop type meaning that something is going wrong from what you're expecting.

[fullfs]

@posva btw sorry if I'm being too rude. I don't mean any offence, it's just a bad habit of mine to heavily defend my opinion :)

[posva]

If the feature doesn't get implemented there should be at least an explicit warning when type is defined but doesn't match and the value passed is static

[posva]

@fullfs np, I'm used to you comments, I know you're a nice guy :smile:
Plus they are not that rude, you're defending a point in a normal way

[fullfs]

@posva ok, thanks!
By the way, we've got the warning actually :)
https://jsfiddle.net/zL0r7rm7/

[posva]

@fullfs yes, but I'm thinking of a more specific warning that will tell you to use v-bind
BTW, does a v-bind with a static value optimise the binding so it get binded only once (like the once modifier)?

[yyx990803]

@posva it is bound only once. We can add a warning in this specific case, but for the original issue - this is working as intended.

[posva]

I didn't see there's a reference to this in docs: http://vuejs.org/guide/components.html#Literal-vs-Dynamic :smile:

[kticka]

@posva, it doesn't work when used in v-for context.