[Vue.js] input要素の入力値を数値変換したいときは number修飾子を使う

##本記事の目的
vueを書いていてどハマりしたので、覚え書き。
初心者向けです。筆者も初心者です。

##どハマり
説明用に簡略化。
input要素にtype="number"を指定して、
入力された数値が0ならアラートを出すよう実装するとします。

<template>
  <div class="root">
    <input type="number" v-model="num">
  </div>
</template>
<script>
  data: function() {
    return {
      num: null
    }
  },
  watch: {
    num: function(newNum) {
      if (newNum === 0) {
        alert("0が入力されています")
      }
    }
  }
</script>

これでうまく行くと思ったのですが、0を入力してみるとアラートがでません。

色々デバッグしてみると、入力値が文字列になっていることがわかりました。
HTML5でinput要素にtype="number"を指定したとしても、入力値を取得すると文字列が返ってくるんですね・・・。
newNum === 0 と厳密等価演算子を使用していたので、
"0" === 0 => falseとなり、アラートがでなかったんですね。

（ここで　newNum == 0　なら自動で型変換されてtrueになるのですが、
暗黙の型変換はちょっと怖いので、===でいきたい）

##解決
公式ドキュメントを見ると、ちゃんとのってました！
参照URL：
https://jp.vuejs.org/v2/guide/forms.html#%E4%BF%AE%E9%A3%BE%E5%AD%90

input要素の入力値を数値にするには、通常のJSならparseIntなんかを使うとおもうのですが、
vueにおいてはv-model.numberとするといいらしいです。

 <input type="number" v-model.number="num">

便利ですね！

※number修飾子はあくまで入力値を数値変換するだけなので、フォームでバリデーションをかける
type="number"も残さねばなりません。

以上です。