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

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

環境

• 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が出力されており数値型であることが分かります。

Vue.jsの公式ページでも、以下記載がありました。

ユーザー入力を自動で数値として型変換したい場合、 v-model で管理している入力に number 修飾子を追加することができます。

type="number"のみでも数値型に変換されるようなことが記載されているのですが、v-text-fieldで試してみるとNGでした。

input が type="number" を持つ場合は number 修飾子が自動で適用されます。

まとめ

v-text-fieldで数値が文字列に変換されている事象と、その解決方法に関して記載しました。

型が暗黙的に変換されていると、思わぬ不具合を生み出す可能性があるので注意して扱いたいですね。