自分用めも

初心者ちっくなプログラムネタを中心に、自分用の覚え書きをメモっていくための場所です。

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を削除する。