Vue textarea autosize

<template>
	<div>
    	<textarea
          ref="text-input"
          v-model="text"
          :style="{
            height: textareaHeight
          }"
          rows="1"
          @input="onTextInput"
        />
    </div>
</template>

<script lang="ts">

@Component
export default class App extends Vue {
  textareaHeight = ''
  text = ''
  minTextareaHeight = 40

  onTextInput() {
      this.$nextTick(() => {
        this.textareaHeight = 'auto'

        this.$nextTick(() => {
          const comp = this.$refs['text-input'] as HTMLTextAreaElement | undefined

          if (comp) {
            const scrollHeight = comp.scrollHeight

            let newHeight: number

            if (scrollHeight >= this.minTextareaHeight) {
              newHeight = scrollHeight
            } else {
              newHeight = this.minTextareaHeight
            }

            this.textareaHeight = `${newHeight}px`
          }
        })
      })
   }
}
</script>

Similar codes

0 vote173 views1 answer
Get typescript props of component
TypeScript
0 vote185 views1 answer
Testing with limited information
TypeScript
0 vote171 views1 answer
Formula: =concatenate(transpose(xxxxx)) highlight transpose (xxxx), press "ctrl" + "=" then delete front and back curly brackets "{ }" enter Add grepper answer
TypeScript
17 votes168 views2 answers
Disable li decoration
TypeScript
0 vote172 views1 answer
Powershell copy contents of keyvault to another keyvault
TypeScript
0 vote153 views1 answer
How many elements can be stored in an array
TypeScript
0 vote175 views1 answer
3d plot goes across limits python
TypeScript
0 vote175 views1 answer
Haproxy stats config
TypeScript
0 vote178 views2 answers
Gradients colors in android
TypeScript
0 vote159 views1 answer
Queryselectorall of multiple tags
TypeScript