【Vuetify】v-text-fieldとは何か？使い方を実例で解説

v-text-fieldとは何か？

Vueのコードを見ていると「v-text-field」といったタグが使わていることがあります。

これはVuetifyというVue用のオシャレなデザインのコンポーネントを提供してくれる機能の一つで、テキストフィールドを表示するコンポーネントです。

具体的には？

v-text-fieldを使うと、以下のようなものを簡単に作成することができます。

 <v-text-field
     label="入力してください"
 >
 </v-text-field>

属性を設定すれば、プレースホルダーの設置や、枠線、背景色をつけることも簡単にできます。

    <v-app>
        <v-col
        sm="3"
      >
        <v-text-field
          label="入力してください"
          placeholder="Placeholder"
          counter="10"
          hint="入力中。最大10文字"
          color="green darken-5"
          clearable
          maxlength="12"
        ></v-text-field>
      </v-col>
    </v-app>

属性の設定内容

• label: 上部に表示しておくテキスト
• placeholder：デフォルトで表示しておくテキスト
• counter: 文字数カウンタ。
  • 「=”数値”」で最大文字数を表示。
  • 設定文字数を超えると赤色に変わる。
  • counterのみの場合は、現在文字数のカウントのみ
• hint: 入力中に下部に表示するテキスト
• color: 文字と下線の色
• clearable: 入力中にクリアボタンを表示する
• maxlength:最大入力文字数。これを超えると入力できない
  

シンプルなプレースホルダの実例

使いやすさを重視したシンプルな入力ボックスは以下で作成できます。

  <v-text-field
    label="入力してください"
    single-line
    dense
    hide-details/>

・single-line
元々設定してある文字を、入力時に上に表示しない。

・dense
余計な余白を省く。
意味は密集させる。denseがない時はtopに少し余白が入る。

・hide-detailas
エラーメッセージやヒントなどを表示させないようにします。

公式サイト
API