Vue.jsでinput type="number"としてもvalueは常に文字列を返すので注意！number装飾子を追加しよう

はじめに

Vue.jsで投稿機能を実装していたときにハマってしまったことをメモしておきます。

ハマってしまったこと

価格入力をするためにinput type="number"として、情報を送信したのですが、うまくデータベースに保存できませんでした。

<div class="form-group">
  <label>価格</label>
  <input type="number" v-model="price" name="price">
</div>

model

price: DataTypes.INTEGER

priceはinteger型なので、input type="number"でいけるかなと思ったのですが、そうではなかったようです。

原因

type=number と書いたときでさえ、 HTMLのinput要素のvalue は常に文字列を返すようです。
なのでvue上で文字列を数値に変換します。

解決策

v-modelに管理された入力にnumber修飾子を追加するだけです。
これで数値として値を保存することができました！！

<div class="form-group">
  <label>価格</label>
  <input type="number" v-model.number="price" name="price">
</div>