Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add .nullify modifier to vue-model #9693

Closed
serge1peshcoff opened this Issue Mar 13, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@serge1peshcoff
Copy link

serge1peshcoff commented Mar 13, 2019

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

This comment has been minimized.

Copy link
Member

posva commented Mar 13, 2019

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
    }
  }
}

@posva posva closed this Mar 13, 2019

@serge1peshcoff

This comment has been minimized.

Copy link
Author

serge1peshcoff commented Mar 13, 2019

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

This comment has been minimized.

Copy link
Member

posva commented Mar 13, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.