[Vue.js]Vuetifyで文字数制限や削除機能の付いたテキストエリアを実装する方法[v-textarea]

Vuetify関連の記事_v-textareaについて

Vuetifyでシンプルかつ、綺麗なチェックボックスを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、18回目になります。
以前、Vuetify関連のシリーズ記事の
第6回目の記事で、Vuetifyを使って、文字数制限を効かせたテキストフィールドを作る方法について書きましたが、
今回は、それのテキストエリア版という事になります。
使うのは v-textarea というコンポーネントです。

↑Vuetify の v-textarea を使って、テキストエリアを表示してみます。

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

基本のコードをご紹介

<template>
  <v-textarea
    auto-grow
    counter
    label="テキストを入力"
    no-resize
    placeholder="テキストを入力"
    rows="3"
  ></v-textarea>
</template>

↑ v-textarea の基本形は、この様な形になります。
もっとシンプルでもいいんですが、
テキストエリアの右下についているリサイズ表示を消したり、
ラベルを表示したり、
最低限スマートな表示にしておきたかったので
いくつか prop を指定してあります。

上から順に、それぞれの prop の役割を書いておきます。
auto-grow … この prop を有効にすると、文字数に応じてテキストエリアが自動で伸びてくれます。
counter … この prop を有効にすると、右下に文字数カウントが表示できます。
label … テキストエリアにラベルがつきます。初期状態は、これがプレースホルダーとして入ることになります。
no-resize … リサイズ機能をオフにします。オンにしたい場合はこれを外します。
placeholder … 何も入力していない状態に表示されるプレースホルダーテキストです。
rows …行数を指定します。

実際に表示してみたテキストエリアのサンプル

今回も、実際に動くサンプルがあります。
次のリンクより、ご覧いただけます。
Vuetify の v-textarea のサンプル

その他のオプションなど

ここでは v-textarea に指定できる、いくつかの prop について書いていきたいと思います。

テキスト削除ボタンを表示する

<template>
  <v-textarea
    auto-grow
    counter
    clearable
    clear-icon="mdi-close-circle"
    label="テキストを入力"
    no-resize
    placeholder="テキストを入力"
    rows="3"
  ></v-textarea>
</template>

↑clearable という prop を有効にすると、入力中のテキストを一括削除するアイコンを表示できます。
アイコンは、 clear-icon という prop に指定する値によって変更する事ができます。
(上記は、Material design icons の mdi-close-circle を指定。)

アウトラインスタイルに変更する

<template>
  <v-textarea
    auto-grow
    counter
    label="テキストを入力"
    no-resize
    outlined
    placeholder="テキストを入力"
    rows="3"
  ></v-textarea>
</template>

↑outlined という prop を有効にすると、外枠を持たせたスタイルに変更できます。

文字数制限を適用する

<template>
  <v-textarea
    auto-grow
    counter
    label="テキストを入力"
    no-resize
    placeholder="テキストを入力"
    rows="3"
    v-bind:rules="myrules"
  ></v-textarea>
</template>

v-text-field の記事の時と同様に、
rules という prop に条件を渡す事で、テキストエリアの制御ができます。
たとえば、文字数制限をかけたい場合は、次のような条件を data として渡します。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        myrules: [text => text.length <= 30 || '最大文字数は30文字です'],
      }
    });
</script>

オプション( props )を加えたサンプル

いくつかの props を加えたサンプルが、先ほどの基本形の下に作成してあります。
次のリンクより、確認する事ができます。
Vuetify の v-textarea のサンプル

公式ドキュメント、APIページなど

v-checkbox コンポーネントの Vuetify公式ページは以下です。

テキストエリア・コンポーネント -- Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props の一覧が記載されています。
v-textarea API -- Vuetify

この記事のまとめ

今回は、Vuetify のUIコンポーネントの中から、
スマートなテキストエリアを扱うことができる v-textarea をご紹介しました。

以前ご紹介した v-text-field と同様、とても使いやすく
見た目も綺麗かつ、文字数制限などの制御もしやすく、
良いUIコンポーネントですね。

文字数に応じて自動でテキストエリアが伸びてくれる点や、
一括削除機能が簡単につけられる点も
使い勝手が良さそうです。

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

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