Vue.jsで管理するtextareaをごにょごにょしたかった

概要

textareaの中身を外からJSでいろいろする画面をVuetifyで作ろうとするとハマる。
実はVuetifyは関係なくてVue.jsなら（たぶん）ハマる。

やろうとしたこと

あるボタンを押すとカーソル位置にテキストが差し込まれるよくあるやつ。

わりとすぐわかったこと

textarea.setTextRangeはVue.jsで管理しているtextareaでは当然うまく動かない。
textarea.selectionStart、textarea.selectionEndでカーソル位置をとってきて、v-modelを直接編集する必要がある。

ハマったこと

textareaのテキスト編集後のカーソル位置がいい感じにならない。
textarea.setSelectionRangeがまともに動いていないように見える。

解

setTimeout(() => bodyTextArea.setSelectionRange(2, 2))

this.$nextTick(() => {
   textarea.setSelectionRange(2, 2))
})

ふーんなるほどね