개요

Vuetify에서 v-textarea를 사용할 때 textarea 아래에 할 수있는 공백을 지우는 방법을 소개합니다.
결론적으로는 전혀 큰 일이 아니었습니다만, 절각이므로 기사 써 보려고 하는 것으로 써 보았습니다.
처음이므로 따뜻한 눈으로 봐 주시면 매우 기뻐합니다.

버전
@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 문서에 쓰여졌습니다. (영어 서투른 피하고 있었습니다…)
익숙하지 않은 동안에는 문서 최강이라는 이야기는 사실이었다고 알 수 있는 좋은 기회였습니다.

참조