Posted at

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>

スクリーンショット 2019-08-10 7.02.51.png

こんな感じになります。


高さを変更する

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

rows="20"

なのでこんな感じ

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

スクリーンショット 2019-08-10 7.09.56.png

はいできました。

簡単ですね。


終わり

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

vuetify公式ドキュメント -textarea-