[Vue.js]文字数制限を持たせた綺麗なテキストフィールドをVuetifyで簡単に実装する方法[v-text-field] :2ページ目

この記事をシェアする：

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

まずはコードをご紹介

それでは早速、Vuetify でシンプルなテキストフィールドを表示してみます。他のコンポーネントに比べても、比較的シンプルな構造をしています。

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col
          cols="12"
        >
          <v-text-field
            label="form label"
            placeholder="placeholder is here"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

↑ とてもシンプルで、扱いやすいです。これを実際に表示してみると、次のようなサンプルになります。

v-text-field のサンプル

今回も実際に動くサンプルをご用意しました。
次のリンクよりご確認ください。
Vuetifyのサンプル_テキストフィールド

Vue.js の機能と Vuetify の props を使い、文字数制限をかけてみる

上記の基本形のテキストフィールドに、
Vue.js が得意とする双方向のデータバインディングと
v-text-field がもつ props を用いて、
シンプルに入力文字の制限をかけてみたいと思います。

こちらのコードもいたってシンプルで、
Vue の data 内に、あらかじめ入力ルール用の値を定義しておき、
それを v-bind の形式で紐づけてあげるだけです。
具体的には、次のコードのようになります。

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col
          cols="12"
        >
          <v-text-field
            label="form label"
            placeholder="placeholder is here"
            v-bind:rules="myrules"
            counter
            maxlength="30"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

↑ 11行目で v-bind してある、入力制限用の data は、次のように定義すればOKです。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      myrules: [v => v.length <= 30 || 'Over 30 characters'],
    }
  });
</script>

↑ この data を定義しておくことで、たとえば30文字を超える入力はできず、さらに超えて入力しようとした場合はアラートが出るテキストフィールドが作成できます。
※もっと言うと、v-text-field の props である rules に、この myrules と言う data をバインドしている事で、テキストフィールドにルールを渡す事ができている、と言う事です。
また、もちろんこの30という数字は、任意で自由に増減可能です。