[Vuetify]フォームコンポーネントの謎の余白を消したい

Vuetifyのフォームコンポーネントには余白がある

VueのUIフレームワークとしてよく使われているVuerify。 便利なので私のプロジェクトでも使っているのですが、TextFieldコンポーネントの下記のような謎の余白に悩まされていました。

余白にはわかりやすくグレーの色をつけてあります。 この余白は、エラーメッセージが表示される枠を事前にコンポーネントが確保していることによるものです。

Vuetifyのフォームの余白を消す方法

この余白が不要な場合は、下記のように hide-details="auto" オプションを追加することで余白を消すことができます。 hide-details オプションは、ヒントやエラーメッセージの表示を制御できるオプションです。

hide-details オプションの注意点

hide-details = "true" とすると、エラーメッセージを全く表示させないようにすることも可能です。その場合、エラーのときはフォームの色が変わるだけになります。 下記が意図的にエラーを発生させている状態の、 hide-details = "auto" と hide-details = "true" のそれぞれの表示です。

エラーが発生していても、メッセージが表示されていないことがわかります。 エラーを表示させたい場合は注意するようにしましょう。