Vueでtextareaの高さを自動調整する
"vue": "^2.6.14"
<template> <textarea v-model.trim="desc" :rows="descCount" style="resize: none;" required /> </template> <script> computed: { descCount() { return (this.desc.match(/[\r\n]/g) || []).length + 1 }, }, </script>
resizeableにしてユーザー操作で高さ調整すると、
rowsのbindが解除されてしまう(改行しても自動リサイズされなくなる)のでresize: noneにしている。
そもそも本旨が自動調整なのでこれでよし判断。
v-model.trimのtrimにより、末尾の無駄な空行は無視される。
無視したくない場合はtrimを削除する。