🌊

【Nuxt UI】数値入力が空の時にnullを持たせる方法

2025/10/02に公開

結論

nullable修飾子を利用する

<template>
    <UInput v-model.number.nullable="val.optional" />
</template>

modelModifiersというpropsがUInputには存在する。
以下、利用可能な修飾子とその説明です。

修飾子	説明
`string`	処理なし。
`number`	`number`に型変換。NaNになった場合は入力値をそのまま親に伝播する。
`trim`	changeイベントの発火後、値を`String.prototype.trim()`を適用した値を親に伝播する。
`lazy`	changeイベントの発火後、値を親に伝播する。
`nullable`	入力値がfalsyの場合`null`に置き換える。
`optional`	入力値がfalsyの場合`undefined`に置き換える。オブジェクトのプロパティがバインドされている場合はプロパティが削除される。

こんな感じで指定してあげるたら使える。

<template>
    <UInput v-model.nullable="value" />
</template>

修飾子自体はVue.jsのデフォルトの機能なので初めて知った人は先にその挙動を確認するのがいいと思う。

Nuxt UI ドキュメントでの該当箇所はこちら〜