Vue.jsのinput or Vuetifyのtext-fieldで数値を入力したのにv-modelのバインド先では文字列になってる問題

結論

• v-model.number="numberData"で解決
• Vuetifyは関係無い
• type="number"しても数値にはならない
• Vue.jsの修飾子に解決策がある

解決: Numberに自動変換する修飾子.number

ご覧の通りVuetifyは関係ありません。

下記のリンクで確認ください
Vue.js/フォーム入力バインディング/修飾子/Number

<template>
  <!-- 色々と省略 -->
  <!-- vue.jsならこう -->
  <div>
    <input v-model.number="numberData"/>
  <div>
  <!-- Vuetifyのtext fieldならこう -->
  <div>
    <v-text-field v-model.number="numberData"/>
  <div>
</template>

余談: 数字 + 文字列を入力してみた

まずは数字だけ入力

ちゃんとNumberになってていいですね！

文字列を含んで入力

ちょっと嫌がらせで色んな文字列を入力してみました。
うまく数字だけバインドされているみたいです！素晴らしい！！

その他のテスト

間に文字列

"100 hoge 100" → Number 100
のように微妙な位置に数字を入れてもバインドされた値は変わりませんでした。

↑の先頭100を200に書き換え

"100 hoge 100"を"200 hoge 100"にしようとした所
バインドの結果がNumber 2 に一度切り替わって無事200と入力することができました。

ソースを追いかけてはいませんが、おそらく数字に変換できるものが入力された時だけバインドしているのだと思います。

余談: 空白を取り除く修飾子.trim

https://jp.vuejs.org/v2/guide/forms.html#trim
Vue.jsには入力から自動的に空白を取り除くトリミング機能まであるとは！
最近の開発はVue.js様様ですね！！

<template>
  <!-- 色々と省略 -->
  <div>
    <input v-model.trim="text"/>
  <div>
</template>