Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

普段は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-

kazy_dev
iOSアプリエンジニアをしています。 Flutterも再開しました。 Docker勉強中。趣味はドラム。 ブログ始めました。 https://kazyblog.com/
https://kazyblog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away