Consider v-model.number to return null instead of empty string when no value provided
What problem does this feature solve?
It has been clearly described in this issue a few years ago: https://github.com/vuejs/vue/issues/4742
When an input having v-model.number modifier gets erased, it shouldn't turn into an empty string, but rather become null. It feels much more sensible and would avoid writing boilerplate code to achieve this. I'd be grateful if you guys could consider it in Vue 3, which is a great moment for this breaking change to be implemented.
What does the proposed API look like?
n/a
Please provide a demo of the behaviour your are having problem with instead of relying on us knowing what exactly you refer to.
Also add the boilerplate you are now fighting to get a feeling of what you experience etc.
Sidenote: a good time for a breaking change would have been in the halb year of beta/rc releases last year, not after the 7th patch release on the stable version.
An example scenario:
- There is an input field with v-model.number modifier applied.
- Its initial value binded to data property is null.
- I type a random number and then decide to erase it so that the input is empty (as it was initially).
- The problem here is that what the empty input value defaults to is an empty string instead of null. To me (and many others in the linked issue) it doesn't feel sensible. What's the point of applying .number modifier to get an empty string in the end? Was there any specific reason for implementing it this way?
So instead of a single line of code:
v-model.number="price"
...this is the (most likely non-ideal) way to achieve what I mentioned above:
:value="price"
@input=" ($value) => (price = parseFloat($value) || null) "
One of the comments from the linked issue summarising this problem up in a nice way: https://github.com/vuejs/vue/issues/4742#issuecomment-404356237
The only difference would be being able to use the ??
operator if the value was null
instead of an empty string, but you still have a way to verify if an input is empty by just comparing it to the empty string. Unfortunately, this would be a breaking change now. It's still fairly subjective and would need to go through an RFC as the empty string is still what the browser provides and there is a way to differentiate empty from non-empty
Sorry for a bit of necro, but I feel like both reasons cited for the closing of this ticket (and the previous one as well) don't make a lot of sense.
- The empty string is what the browser provides: This was also cited in the previous ticket, but that has nothing to do with the requested feature. The browser also returns a string when an input type is
"number"
, the whole idea of.number
is that conversion is made on the Vue side of things. - This being a breaking change: Can't
.null
/.nullable
/etc be added as av-model
modifier? This could also apply for normal strings, not only numbers.
As for the reasoning behind implementing this, I feel like it's much more reasonable in most cases to have a value be either null
or number
than it sometimes being a string, hence why I'm leaving this comment.
If you feel like the request of .null
deserves it's own ticket, I can create is separately.