【Vue.js】autosizeなtextarea

概要

ユーザーの改行にあわせて自動的に伸びるテキストエリアをVue.jsで

デモ

コード

<textarea v-model="value" :rows="rows"></textarea>

  computed:{
    rows:function(){
        var num = this.value.split("\n").length;
        return (num > 4) ? num : 4;
    }
  }

textareaのrows属性に\nの数をぶち込んでるだけ。

おわりに

• Vue.jsはシンプルなコードで色々できて便利。強さを感じる。
• 思い至るまで、伸びるテキストエリアのためだけにVueにjQueryとjQuery-autosizeを併用して依存増やしてた。
• もっと日本語で検索可能なところに、Vueの小ネタ的記述増えてくれ。