• T sakurako

VueでWEBアプリ(25) 本文欄を複数行に

更新日:9月1日

久しぶり過ぎて作っていたWEBアプリがどんなものかすら結構忘れてしまっていたので、コードやこれまでの記事を見つつ復習しています。


そんな状態ですので、今回はせめて簡単な修正だけでもということで、

詳細表示・新規登録画面での本文欄を複数行にする という修正をしました。


あと、今回から記事タイトルに内容についての記述を加えます。

今更な感じもしますが、今回振り返るために過去の記事を見返していて、タグだけでは不便であることを身をもって知ったので…。



ArticleDetail.vue


v-text-fieldをv-textareaに変更し、

rows='3'でデフォルト表示を3行に、

auto-growでテキストエリアが文章量に応じて自動的に広がるようにしました。

              <v-textarea
                v-model="content"
                :rules="contentRules"
                label="本文"
                counter="100"
                rows='3'
                auto-grow
                :readonly="mode === 'show'"
                required
              >
              </v-textarea>


新規登録画面

詳細画面


この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。


https://github.com/izumi-shibano/test-vue


8回の閲覧