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

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

この記事は 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という数字は、任意で自由に増減可能です。

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

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

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

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

公式APIページは次のリンク先になります。
このページに、v-text-field で使用できる props についての一覧があります。
v-text-field API -- Vuetify

この記事のまとめ

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

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

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

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

この記事をシェアする: