Vue.jsのフォーム入力バインディング・input type=”number”の値を文字列ではなく数値として取得し扱う

ここのところ、プログラミング系の話を書いていませんでしたが、いきなりVue.jsの話でも書こうと思います。

4月くらいからVue.jsをようやく！？触る機会があるのですが、基礎もまだまだよく理解できていないところもあり、先日input type=”number”に入力した値をデータとしてVue.js上で扱いたいときの対処にちょっとはまってしまいました。

その時の経緯と、対処法について自分への備忘録がてら残しておきたいと思います。

input type=”number”の値をJavaScriptで取得すると、そのデータは数値型ではなく文字列型になる

プログラミングには様々なデータの種類があります。

1という数字も、文字として扱うこともあれば数値として扱うこともあり、それらのデータ形式によって、プログラミングにおける処理の結果が変わってくる、なんていうことが日常茶飯事にあります。

See the Pen vuejs-table-lenght-change by majikari-keruo (@castero) on CodePen.

今回僕が試していたサンプルは上記の通り。

HTMLのinput type=”number”の値に数値を入力し、その数値に応じてテーブルの表示数を変更するというものです。

そのままJavaScriptで動かそうとすると、input type=”number”に入力された数字の値は「文字列」として取得されるため、数値にはなりません。

このままだと何が問題かというと、「v-for」で設定しているdivタグの箇所に対して、tableLengthの値が文字列として入ってくるため、input type=”number”の入力値が変わっても、テーブルの数が常に1つしか表示されない状態になってしまうのです。

Vue.jsでフォーム入力データバインディングする時に便利なnumber修飾子

最初、input type=”number”に入力された値は文字列として扱われることは知っていたものの、それを数値として扱いたい場合にVue.jsではどうやっていいのかよくわからず、わざわざchangeイベントを引っ掛けて、methodsの中でchangeイベントが発生したときにフォームへの入力値を取得し、それをわざわざ再代入するという回りくどい方法をとっていました。

が！ちゃんとあるんですね・・・Vue.jsにはこんな時に便利なものが。

結論からいうとVue.js公式・フォーム入力データバインディングのページに答えが掲載されていたのですが、number修飾子というものを使うと、簡単にinput type=”number”に入力された値を数値として扱うことができるようです。

See the Pen vuejs-table-lenght-change-finished by majikari-keruo (@castero) on CodePen.

上記のように、v-model →　v-model.numberとするだけで、入力値を数値扱いすることができるようになります。

まとめ

ということで、今回はVue.jsでinput type=”number”の値を文字列ではなく数値として取得し扱う方法についてご紹介させていただきました！

色々便利なものですねー。備忘録的な感じで、これからVue.jsに関する記事もたくさん書いて、自分の中に理解として定着させていこうと思います！