Type transformation modifiers for v-model

[rpkilby]

From @Morgul's comment in #1713:

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

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

It would also seem useful to be able to register custom transformations. eg, datetime transformations for Moment.js objects.

[Morgul]

@rpkilby Thanks for creating this issue, I was planning on tackling it to day, but work got in the way. :)

[davidkhess]

Curious - couldn't this just be done with custom two-way filters? Maybe I'm missing something.

[posva]

@davidkhess Indeed, it seems possible: https://jsfiddle.net/posva/8whzuL16/1/

[Morgul]

@davidkhess Yes, it's possible. This issue, however, is about adding built-in support.

The problem I've had with this approach is that it's unexpected, coming from other frameworks. All of them 'have the magic built in' to handle number inputs. Writing your own filter to handle this, while possible, is very sub-optimal. The compromise between what @yyx990803 envisions and what I'd like seems to be adding transforms for v-model.

[davidkhess]

@Morgul completely understand – I tend to favor less magic.

[posva]

@rpkilby @Morgul Do you have a real use-case about any modifier you think should exist?

There is already a number parameter for text inputs: http://vuejs.org/guide/forms.html#number
Isn't it enough?

[Morgul]

@posva Not really, no. As discussed in #1713, it's surprising when you're getting a number out of a number input. While vue has a way of handling that (the number directive), we discussed the fact that it could be better implemented as a transform, because then vue's syntax for handling these sorts of issues is consistent. This is the exact type of thing transforms were made for; number should be one.

[rpkilby]

@posva - It seems like a date transform for the date/datetime input types would be useful. However, I'm more interested in being able to register transforms. eg,

• momentjs transform instead of a potentially built in date transform
• JSON transform

[posva]

@rpkilby I think two way filters work out pretty well for this. The guide actually talk about this http://vuejs.org/guide/custom-filter.html#Two-way-Filters
Maybe a more explicit example showing v-model="when | date" in the docs help out. I don't think a modifier is needed because two way filters already address this issue

[rpkilby]

@posva - yes, and we currently do this. I guess my problem is that I have vague (and I want to emphasize, very minor) dissatisfactions with the API for dealing with various data types. I have some thoughts that haven't really formed into anything cohesive.

• Boolean values and array selection are handled magically for inputs of type="checkbox" (and to be fair, this is kind of necessary).
• Number values are not handled magically for inputs of type="number", and require a number paramater.
• Any other data type requires a two-way filter.

The result of all of these leaves us with:

<input type="checkbox" v-model="foo" />
<input type="number" v-model="bar" number />
<input type="date" v-model="baz | date" />

• Given that checkbox has magical behavior, it's understandable that someone would expect that number would have magical behavior as well.
• Forgetting to add the number parameter is an easy source of bugs.
• Why does number get special treatment anyway? Should it be replaced by a filter?
• Filters seem like they should be used for value transformations, while this request is more about type transformation.
• I also don't like the idea of polluting the filter namespace with type transformation filters. Out of a form context, they don't make much sense. At the very least, it's great that Vue has global and component-local registration, so this isn't really an issue.

Example:

<input type="text" v-model="title" />
<input type="text" v-model="slug | lower | kebab" lazy />
<input type="date" v-model.date="publishOn" />
<input type="number" v-model.number="priority" />

Edit:

• Regardless of opinions on the above, I do think it would be good to add a section on two way filters to the form docs as a way of handling type conversion.
• Also, really want to reemphasize that these are very minor consistency/API nitpicks. Vue has been a huge boon and the existing form bindings work.
• One downside to the proposal is that there would be some overlap between two-way filters and v-model type transforms.
• I apparently like bulleted lists

[davidkhess]

@rpkilby very nice analysis and writeup. Agreed, things are inconsistent.

[yyx990803]

@rpkilby thanks for the thoughtful input - we'll definitely improve this in 1.1 :)

[rpkilby]

@yyx990803 any new thoughts on this given the deprecation of filters outside of interpolated text in Vue 2.x?

[davidkhess]

Ditto, removing filters seems to beg for some hook on v-model to accomplish type/value transformations.