textareaの高さを自動で変える方法 Vue.js編 | アールエフェクト

HTMLのtextareaの高さはrows属性によって行を設定することはできますが、 一度設定すると変更を行うことができません。本文書ではvue.jsを利用してユーザが入力した行によってtextareaの高さを自動拡張、自動収縮する機能を作成します。 textareaの高さの自動調整についてはvue-textarea-autosize-masterというパッケージがあるので中身を参考にさせてもらいました。 手元の環境で動作確認できるようにcdnを利用して作成しています。 textareaの高さが比較的短い場合は問題になりませんが、textareaの高さがブラウザの高さを超えた場合少しスクロールをして文字を入力すると入力のカーソルがブラウザの一番下に表示されるように自動でスクロールが行われるといった動作になります。textareaが高さが長い場合には適していないので注意してください。 初期設