how to update the height of a textarea in vue.js when updating the value dynamically?

Question

Working with Vue.js, I do use a simple way to set dynamically the height of a text area that resizes when typing. But I am not able to do it when the component mounts or the value updates.

I have already try http://www.jacklmoore.com/autosize/, but it has the same problem.

I have created a sandbox that shows the problem, when typing the box it updates, but not when the value changes dynamically

Live example: https://codesandbox.io/s/53nmll917l

Answer 1

Not really feeling the answers posted here. Here is my simple solution:

<textarea
   rows="1"
   ref="messageInput"
   v-model="message"
/>

watch: {
    message: function(newItem, oldItem) {
      let { messageInput } = this.$refs;
      const lineHeightInPixels = 16;
      
      // Reset messageInput Height
      messageInput.setAttribute(
          `style`,
          `height:${lineHeightInPixels}px;overflow-y:hidden;`
      );

      // Calculate number of lines (soft and hard)
      const height = messageInput.style.height;
      const scrollHeight = messageInput.scrollHeight;
      messageInput.style.height = height;
      const count = Math.floor(scrollHeight / lineHeightInPixels);

      this.$nextTick(() => {
        messageInput.setAttribute(
            `style`,
            `height:${count*lineHeightInPixels}px;overflow-y:hidden;`
        );
      });
    },
}

<style scoped>
textarea {
  height: auto;
  line-height: 16px;
}
</style>