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

Input/Textarea nullify modifier #2281

Open
Gerbuuun opened this issue Sep 30, 2024 · 0 comments
Open

Input/Textarea nullify modifier #2281

Gerbuuun opened this issue Sep 30, 2024 · 0 comments
Labels
enhancement New feature or request triage

Comments

@Gerbuuun
Copy link

Gerbuuun commented Sep 30, 2024

Description

Most of the time when I work with forms, I have some sort of state object like so:

const state = ref({
  name: '',
  email: '',
  company: null,
  title: null,
});

When a user changes the value in the input, the value will never be null again (even if they delete their input).
Currently, the solution is doing null coercion in e.g. a useFetch function:

// code snippet only for illustration
const { data } = await useFetch('/api/some/endpoint', {
  method: 'POST',
  body: {
    name: state.value.name,
    email: state.value.email,
    company: state.value.company ?? null,
    title: state.value.title ?? null,
  },
});

This requires spreading and/or overriding values independently.
Say you have some kind of dashboard application with many forms (my case), then you have to do this for every form that has "optional" inputs.

What you actually want is:

const { data } = await useFetch('/api/some/endpoint', {
  method: 'POST',
  body: state,
});

Where the input returns null if it contains an empty string.
This can be done by adding a model modifier:

<UInput v-model.nullify="state.company" />

Just like trim and number trims the value or coerces to a number respectively.

Additional context

This PR depends on allowing null as initial value as implemented in (#2275)

@Gerbuuun Gerbuuun added enhancement New feature or request triage labels Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request triage
Projects
None yet
Development

No branches or pull requests

1 participant