vuetifyのv-textareaの高さを変更する

はじめに

普段はiOSエンジニアをしています。
仕事でvue.js+vuetifyでSPAでお問い合わせ画面を作る機会があったので、その備忘録です。

環境

vue 2.6.10
vue-cli-plugin-vuetify 0.6.1
vue-router 3.0.7
vuetify 2.0.4
vuetify-loader 1.3.0

textareaの設置方法

<v-textarea></v-textarea>

設置にはv-textareaを使います。

その他オプションを追加していく

<v-textarea outlined
 name="input-7-4" v-model="message" :rules="messageRules" required label="Message"></v-textarea>

こんな感じになります。

高さを変更する

高さの変更はrowsを追加します。

rows="20"

なのでこんな感じ

<v-textarea outlined rows="20" name="input-7-4" v-model="message" :rules="messageRules" required label="Message"></v-textarea>

はいできました。

簡単ですね。

終わり

vutifyはドキュメントが充実しているので、まずはドキュメントを見るのが一番いいかと思います。
vuetify公式ドキュメント -textarea-