Vuetifyのv-textarea下にある空白を消し去る

2948 ワード
Vuetify Vuetify テキストリンク

概要

Vuetifyでv-textareaを使ったときにtextareaの下にできる空白を消す方法を紹介します。
結論的には全然大したことじゃなかったのですが、折角なので記事書いてみようってことで書いてみました。
初めてなので生温い目で見て頂けると大いに喜びます。

Version
@nuxt/cli v2.14.6
vuetify 2.3.14

コード

とりあえずv-textarea使ってみる。

<template>
  <div class="container">
    <v-form>
      <v-textarea outlined>
      </v-textarea>
    </v-form>
    <p>上に空白できるよー</p>
  </div>
</template>

こんな感じでテキストエリアの下になんかいる。

原因と対処法

v-textareaにはバリデーションやヒントのメッセージを簡単に表示できる機能があり、
そのメッセージを表示するためのエリアがテキストエリアの下に空白として出てるっぽい。
特にバリデーションやヒント使わないで、空白消したい場合はv-textareaのpropsに
hide-details="false"指定してあげれば消え去ってくれます。

<template>
  <div class="container">
    <v-form>
      <v-textarea outlined hide-details="false">
      </v-textarea>
    </v-form>
    <p>上に空白できるよー</p>
  </div>
</template>

すっきり！

まとめ

Vuetify便利で良いですね、使いこなせていませんが。
日本語で「Vuetify v-textarea 空白」とか調べて2日くらいモヤモヤしてましたが、
普通にVuetifyのドキュメントに書いてありました。（英語苦手で避けてました…）
慣れないうちはドキュメント最強という話は本当だったのだと知る良い機会でした。

参照