Question for auto-resizing Textarea using VueJS

Question

I'm trying to let the text area automatically adjust its height when the text value changes:

<textarea ref="textarea" v-model="message"> </textarea>

I used a watcher to monitor the component variable "message" associated with the text area. Whenever the message changes, a function will be triggered to adjust the textarea height:

watch: {
  message: function(){
    this.$refs.textarea.style.height="auto";
    this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight + 'px';
  },
}

The code works well if I manually type inside the box. However, if I use methods to update the textarea variable "message", the size of the box does not update correctly.

To make it more clear, I created a fiddle project: https://jsfiddle.net/ttl66046/9nycdq60/4/ codepen here: https://codepen.io/ttl66046/pen/eYGqJWm

There are two buttons underneath the textbox. Each button is associated with a short text. Ideally, the height of the textbox should be updated based upon the button you clicked (the text you choose). What is the issue here?

Answer 1

The effects of the watcher are not rendered until the next render cycle. The message watcher sets height twice (once to auto and then immediately overwrites it with scrollHeight), but the component does not re-render in between each setting.

The key is to update the height in the next render cycle with a $nextTick() callback:

export default {
  watch: {
    message: function() {
      this.$refs.textarea.style.height = "auto";
               👇
      this.$nextTick(() => {
        this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight + 'px';
      })
    }
  }
}

updated codepen