この記事は 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 に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。