Add .undefined modifier to vue-model

[CaseyHofland]

This is a feature request that was asked for back in Vue 2

I would like to reopen it with a slight alteration because it would be a great feature. For some input fields, usually numbers and text, we would like our model to be set to undefined when the user does not provide any input. However, the current implementation is that the input resets to 0 for numbers and "" for text.

<script lang='ts' setup>
const myNumber = ref<number | undefined>(undefined); // Or ref<number>();
</script>

<template>
  <input type='number' v-model='myNumber' /> // Input of "" is converted to 0.
</template>

The current quick fix is to add a watchEffect for converting 0 to undefined, but that doesn't allow for 0 as a valid input.

watchEffect(() => myNumber.value = myNumber.value || undefined);

A much more elegant solution would be to have a modifier .undefined (and sibling modifier .null) to handle this for you. It would look like this:

<template>
  <input type='number' v-model.undefined='myNumber' /> // Resets "" to undefined, and lets 0 be 0
  <input type='text' v-model.trim.null='myText' /> // Works in unison with the .trim modifier to reset whitespace to null
</template>

I know there has been asked for custom modifiers as a feature, but even if that goes through I would still like to see this added in native Vue. It would remove a lot of headaches around data-formatting, and nobody would have to reinvent the wheel when they stumble against this problem again.