Replies: 2 comments 1 reply
-
I would also like to have more advanced
This also raises all the problems from #188 when |
Beta Was this translation helpful? Give feedback.
-
Friendly bump of this topic after the release of stable
It's not composable and it just doesn't feel "right" that the model modifiers must be hard-coded into each component models. There's no reason to hardcode lists of I think Vue should try to come up with a design for a Modifier API that can be applied to any |
Beta Was this translation helpful? Give feedback.
-
I wish that
v-model
(for native DOM elements) had extensible modifiers.In other words: that there was an API to provide our own modifiers during app configuration and that
.trim
,.number
and.lazy
where things that were doable in userland.Those three are nice, but it's a really small subset compared to all the useful things the community could dream.
On the other hand, because of size and maintainability, it's not in Vue interest to add more and more modifiers to its core lib.
It's the perfect thing to be provided by community, but it's not possible today.
Use cases
I'm sure you can come up with lots of use-cases, here are just a few:
.null
replaces empty strings withnull
values.int
like.number
but enforces integer values.number
like.number
😆 but with less error-tolerant parsing.date
,.datetime
,.time
,.interval
,.bool
and any type you can think of.upper
and.lower
to change the casing of text.lazy
but with other events?.empty
displays a specific value when source is null or empty (both ways).Slight problem with the last one: this modifier would need an argument. TBD but since v-model has access to the DOM element, the argument could be in
data-empty
for example.Alternative 1: computed or custom ref
If you back your v-model with a computed or custom ref, you can do some transformations at this level.
This is a less convenient but more importantly, it is impossible except for the simplest scenarios.
.trim
for example is a lot more subtle than you think.If you trim the string in your model as the user types, it becomes impossible to type sentences with spaces, as they're removed as soon as you type them, even if you want to continue typing. Adding
.lazy
helps but prevents you from updating your UI as the user types.If you look at the source of Vue,
v-model
contains code specifically to avoid updating the UI when.trim
is used if it only differs from model by spaces. The UI is eventually trimmed in@change
.This is good but impossible to replicate in a
computed
.Alternative 2: use functions in bindings
You can format anything with a function, and for convenience you can declare global functions available everywhere.
But they don't work in
v-model
, because the v-model expression must be writable.Alternative 3: wrap native elements
This is really heavy-weight if
.null
is all you wanted...If you wrap elements then you can do whatever you want in
v-model
.Alternative 4: do everything in code
Wire-up the transformations you want in an additional layer everywhere you want it.
This is a lot of repeated boilerplate, esp. in large applications with lots of screens.
Beta Was this translation helpful? Give feedback.
All reactions