【Vuetify】v-textareaで、改行されたことを分かりやすくする

タイトルの通り、v-textareaを使用する際に改行されたことを分かりやすくする方法に関して、画像を加えながら説明します。
また、関連した内容についても少し紹介します。

環境

auto-grow をv-text-area内に記述することで、textareaのサイズを自動的に大きくすることが可能です。

今日のTODOを自由入力する例を考えて、以下を入力するとします。

・掃除
・洗濯
・買い物
・英単語を1章進める
・ブログ1記事
・ストレッチ

        <v-textarea
          v-model="sampleText"
          label="今日のTODOを入力してください"
        ></v-textarea>

        <v-textarea
          v-model="sampleText"
          label="今日のTODOを入力してください"
          auto-grow
        ></v-textarea>

変更後のコードは、変更前に対してauto-growを付与しているだけです。
キャプチャを比較すると、変更後は全ての入力内容を見ることができていることが分かりますね。
変更前は、先頭の「・掃除」部分が見えなくなっています。

入力が予想される内容によって、表示領域を変えたい場合があるかと思います。
その際はrows, row-heightプロパティを使用してデフォルトの表示領域を小さくすると、表示をすっきりと見せることができます。

        <v-textarea
          v-model="sampleText"
          auto-grow
          rows="1"
          row-height="15"
        ></v-textarea>

v-textareaで改行されても先頭行を表示しておく方法や、関連して表示領域を変更する方法についても紹介しました。

記事を見て頂いた方のお役に立っていれば幸いです。