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

Vue.js&Vuetifyの記事_v-text-fieldについて

シンプルだけど使い勝手の良い、そんなテキストフィールドがつくれます

Vuetify のUIコンポーネントを実際に使ってみるシリーズの記事、6回目になります。
今回は、v-text-field というコンポーネントを使用して、シンプルながらも使い勝手の良い、そんなテキストフィールドを作ってみます。


↑このような、入力文字数のルール等を設定したテキストフィールドを作ってみます

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

まずはコードをご紹介

それでは早速、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のサンプル_テキストフィールド

Vuejsの機能を使い、文字数制限をかけてみる

上記の基本形のテキストフィールドに、
Vuejs が得意とする双方向のデータバインディングを用いて、シンプルに入力文字の制限をかけてみたいと思います。
こちらのコードもいたってシンプルで、
Vuejs の 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="rules"
            counter
            maxlength="25"
          ></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: {
      rules: [v => v.length <= 25 || 'Max 25 characters'],
    }
  });
</script>

↑ この data を定義しておくことで、たとえば25文字を超える入力はできず、さらに超えて入力しようとした場合はアラートが出るテキストフィールドが作成できます。
もちろんこの25という数字は、任意で自由に増減可能です。

文字数制限など、ルールを加えたサンプル

文字数制限版は、先ほどの基本形の下に、サンプルをご用意しました。
次のリンクよりご確認ください。
Vuetifyのサンプル_テキストフィールド

Vuetify公式ページ、公式APIページなどについて

Vuetify公式の、v-text-field ページは次になります。
テキストフィールド・コンポーネント -- Vuetify

公式APIページ次のリンク先になります。
v-text-field API -- Vuetify

この記事のまとめ

今回は、Vuejs と Vuetify を組み合わせて
シンプルながらも使い勝手の良いテキストフィールドが実装できる v-text-filed コンポーネントについて、ご紹介しました。

このUIコンポーネントですが、
前回ご紹介した v-dialog と組み合わせて、ダイアログ内にテキストフィールドを表示させて、ユーザーに何らかのアクションをしてもらう際の
UIパーツ等に、とても活躍してくれるコンポーネントになります。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。