Nullable inputs

[ElYaiko]

Description

Inputs like Input/Textarea/SelectMenu... area throwing error when using null | undefined in the VModel, sometimes initial values can be null | undefined so it would be good to allow this.

Thanks.

Additional context

No response

[moshetanzer]

@benjamincanac thoughts?

[ElYaiko]

Any update?
It supports now undefined but not null.

[Gerbuuun]

You can make a workaround yourself for now with the following component:

<script lang="ts" setup>
const [modelValue, modelModifiers] = defineModel<string | null, 'nullable', string>({
  set(value: string | null) {
    if (modelModifiers.nullable && value === '') {
      return null;
    }
    return value;
  },
  get(value: string | null) {
    return value ?? '';
  },
});
</script>

<template>
  <UInput v-model="modelValue" />
</template>

Then you can use the component like this:

<script setup lang="ts">
const value = ref({
  nullable: null,
  nonNullable: '',
});
</script>

<template>
  <div>
    <NullableInput v-model.nullable="value.nullable" />
    <NullableInput v-model="value.nonNullable" />
    <pre>{{ value }}</pre>
  </div>
</template>

You can read more about model modifiers here: https://vuejs.org/api/sfc-script-setup.html#modifiers-and-transformers