Vue: Remove attribute when v-model.number is empty

Created on 22 May 2017  ·  4Comments  ·  Source: vuejs/vue

What problem does this feature solve?

Solves a design pattern issue, that is of course expected from an MVM flow including v-model.number producing a string when empty.

When i enter a number and then delete the text from input, it turns into a string in the reactive data object.

This is certainly a major usability and casting issue, and i don't see the purpose of keeping an empty string attribute on the model. It should get spliced out of the model when its empty - just as you create new attributes on the text entry, it should be vice versa.

This is certainly a design pattern issue that should be resolved, not needing to be implemented on the application level each time, it's a small fix that will add a lot to VueJS2, and i'm sure many others will agree with me on this!

What does the proposed API look like?

Currently when input is empty

v-model.number="model.number"
model = {
number: ""
}

What it should do when input is empty

v-model.number="model.number"
model = {
}

Most helpful comment

@posva After further understanding Vue's reactivity, returning null would definitely be the better option rather then returning a string

All 4 comments

I guess current behavior is the expected one.
Beause v-model is just syntax sugar for v-bind:value and v-on:input, it does not seem to make scene that the input event handler delete a property of an object (and maybe break the reactivity of that property).

I will find a work around, thank you :) 👍

As you saw in #4742, it's expected behavior. the reason is to allow the user to know when no value is provided in the input. Otherwise, a 0 could be entered by the user and also an empty input

@posva After further understanding Vue's reactivity, returning null would definitely be the better option rather then returning a string

Was this page helpful?
0 / 5 - 0 ratings