0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

入力ボックスのスピナーの落とし穴

Posted at

こんにちは、新人エンジニアの三上です。

今回は私が実際に実装を行った際に失敗した記録を残していきます。

入力ボックス

以下のタグを使用することで入力ボックスを作成することが出来ます。

input
    v-text-field(type="number")

上記のように、type に 「number」を指定することで
以下の入力ボックスのようにスピナーボタンが付加される。

200907_01.png

この入力ボックスの入力値は操作方法によって型が異なる。
 ・スピナー押下によって入力 → int
 ・キーボードによって入力 → string

まとめ

以上のように、型が1つに定まらないためバリデーションチェックを行う際などのように、入力値に対して桁数のチェックをする場合は注意が必要となります。
文字列に変換したうえで、桁数の判定を行うことで問題なく判定することができます。

以上、三上でした。

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?