Add .nullify modifier to vue-model

[serge1peshcoff]

What problem does this feature solve?

I'm using Vue.js in most of my projects as a frontend framework. And in a lot of cases I've faced a pattern like this: the string should be either null or not empty. So for now I need to write a lot of workarounds about it, which result in a lot of copy-paste code in all of my components, since custom modifiers are not implemented.
So my proposal is: add the .nullify modifier to v-model, that would set the value to null if it's an empty string.

I think that can benefit not only me, but also other users, as I've seen a lot of upvotes here, where the user suggested it: #3666 (comment)
I can and will make a PR on that if most of the people would think it's a good idea.

What does the proposed API look like?

<input type="text" v-model.nullify="value" />

Can also work with other modifiers, like this:

<input type="text" v-model.trim.nullify="value" />

That'd give us null if the value is either empty or contains only tabs and spaces.

Also that can work with numbers (I've also faced a few cases where the value should be either a number or null):

<input type="text" v-model.number.nullify="value" />

[posva]

If we add an api, it would be for custom modifiers, to enable more behaviours but it requires some work to define the api, and should go through the process of an RFC if anybody is willing to take the time to think about a proper proposal (#3666 (comment))

For the moment you can implement these things by using computed properties:

computed: {
  // use value$ in v-model
  value$: {
    get: ({ value }) => value,
    set (value) {
      this.value = value || null // coerce to null
    }
  }
}

[serge1peshcoff]

I totally support the idea of custom modifiers, but the built-in .nullify modifier can be quite useful to others, what do you think?

[posva]

that would make an argument to add any built-in modifier to v-model
Use a computed property for the moment to coerce a text input value to null

[Danita]

Today I stumbled on this case in two different projects and got here by searching Google if there was a v-model modifier or something I could use. I fully support the inclussion of a .nullify modifier.

The use case is: I receive a JSON from the server with a spreadsheet consisting of numbers, that is editable via a Vue form, which is sent again to the server as JSON. For the server null (the user has not entered information) and 0 (the user has specified a zero amount) are different things, and there is no straightforward way to do that using v-model only.

[jbg]

that would make an argument to add any built-in modifier to v-model

Only ones that are widely useful and make something possible (e.g. number-or-null, a very common case) that many people need.

Use a computed property for the moment to coerce a text input value to null

Not great if you have an object with many (but not all) values nullable like this. Making a component for editing those values, which optionally uses the computed property approach to handle the nulls, is pretty messy especially in combination with typing.

[CaseyHofland]

HOW IS THIS TAKING SO LONG!!!

.null or .nullify is such an elegant solution. Writing WritableComputed components everywhere is dumb and bloats the component.

I will add that I would prefer .undefined over .null, or even better give us both, but either one solution is fine, just give it to us already!

[lsdch]

Also supporting the inclusion of this feature, or at least please give the possibility to define global v-model modifiers 🙏