⌨️

Vue3で数字のみの入力ボックスを作る

2022/05/26に公開

Vue2までは、v-modelを使うときに<input type="number">を使っても、デフォルトで文字列としてバインディングされていました。ところがVue3になると<input type="number">は数値としてバインディングされてしまいます。

`v-model`を使わない書き方

<input
  type="number"
  :value="value"
  @input="event => value = event.target.value" />

Vue2時代と同じように<input type="number">を数値ではなく数字の文字列として扱いたい場合は、v-modelを使わない書き方をする必要があります。

<input type="number">を使うときはスピンボタンは消しておいたほうがいいです。
↓参考

<input
  type="text"
  :value="value"
  @input="event => value = event.target.value.replace(/[^0-9]/g, '')" />

Vue3としては、<input type="number">は数字の文字列ではなく数値であって、それはJavaScriptのNumberなのだということなのでしょう。

MDNでも次のように説明されています。

<input> 要素の number 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。

すると<input type="number">を数字の文字列に利用するのはVue3では良くない書き方ということになります。
代わりに<input type="text">を使って、正規表現で使える文字を制限することができます。

<input
  type="number"
  :value="value"
  @input="event => value = event.target.value.replace(/[^0-9]/g, '')" />

<input type="text">だと、スマホで数値を入力するユーザーインターフェースが使えません。<input type="number">で、さらに正規表現で使える文字を制限するのが良いかもしれません。

個人的にはどのような入力フォームを使ってもバリデーションチェックは必要ですので、v-modelだけで<input type="number">を数字の文字列にも数値にもできるVue2のほうが良かったです。