'Question for auto-resizing Textarea using VueJS

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?

javascripthtmlvue.jsvue-componenttextarea


Solution 1:[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

Solution 2:[2]

add following code in css:

textarea {
    width:200px;
    resize:none;
  }

Solution 3:[3]

If you want to "+" row and "-" row on change TEXT use Vue3 (Composition API for me):

            <textarea
               id="newComm"
               class="form-control"
               name="comment"
               placeholder="Some text you want"
               cols="30"
               :rows="rowsHeight"
               wrap="soft"
               v-model.trim="newCommText"
               @input="changeRows"
               :style="'resize: none; overflow: hidden; line-height: '+lineHeight+'px;'"
        ></textarea>

    setup() {
    /*--------your code here--------*/

    const newCommText = ref(null)
    const rowsHeightStart = ref(5)
    const rowsHeight = ref(rowsHeightStart.value)
    const lineHeight = ref(25)
    function changeRows (event) {
        rowsHeight.value = event.target.value.split("\n").length > rowsHeightStart.value ? event.target.value.split("\n").length : rowsHeightStart.value
    }

    return {
         rowsHeight, lineHeight, newCommText,
        changeRows
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 MAGGIx1404
Solution 3 ??????

Related Questions