vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.62k stars 8.32k forks source link

Consider v-model.number to return null instead of empty string when no value provided #3378

Closed DamianGlowala closed 3 years ago

DamianGlowala commented 3 years ago

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

LinusBorg commented 3 years ago

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.

DamianGlowala commented 3 years ago

An example scenario:

1) There is an input field with v-model.number modifier applied. 2) Its initial value binded to data property is null. 3) I type a random number and then decide to erase it so that the input is empty (as it was initially). 4) 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

posva commented 3 years ago

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

rockisch commented 1 year ago

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.

  1. 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.
  2. This being a breaking change: Can't .null/.nullable/etc be added as a v-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.