v-text-fieldで文字列に変換される事象を解決する

v-text-fieldで数値を入力したいケースで、文字列型に暗黙的に変換される場合があります。
この記事ではその解決方法に関して説明します。

環境
数値が文字列型に変換される
v-model.numberを使用して数値型として扱う
まとめ

環境

Nuxt
- 2.15.7
Vuetify
- 2.5.5

数値が文字列型に変換される

簡易的にv-text-fieldを用意し、v-modelに数値型の変数を連動させtype=numberにしています。

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="4">
        <v-text-field
          v-model="num1"
          type="number"
          label="数字を入力"
          @change="confirmIfNumber"
        ></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import Vue from 'vue';

interface dataType {
  num1: number;
}

export default Vue.extend({
  name: 'index',
  data: (): dataType => ({
    num1: 1,
  }),
  methods: {
    confirmIfNumber() {
      console.log('num1:', this.num1, typeof this.num1);
    },
  },
});
</script>

<style></style>

画面から値を変更しconsoleで確認してみると、string であることが出力され文字列型に変換されていることが分かります。
本来は数値として扱いたいので、意図していなかった挙動になります。

v-model.numberを使用して数値型として扱う

結論から言うと、以下のようにv-model.numberを使用すると解決できます。

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="4">
        <v-text-field
          v-model.number="num1"
          type="number"
          label="数字を入力"
          @change="confirmIfNumber"
        ></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import Vue from 'vue';

interface dataType {
  num1: number;
}

export default Vue.extend({
  name: 'index',
  data: (): dataType => ({
    num1: 1,
  }),
  methods: {
    confirmIfNumber() {
      console.log('num1:', this.num1, typeof this.num1);
    },
  },
});
</script>

<style></style>

consoleで確認すると、numberが出力されており数値型であることが分かります。