[Vue.js]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>