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

7 votes227 views3 answers
Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
TypeScript
0 vote138 views2 answers
Spritesheets in pyqt
TypeScript
0 vote92 views2 answers
Localstorage.getitem angular
TypeScript
21 votes135 views2 answers
Voting results 2020 live
TypeScript
7 votes136 views3 answers
C# System.InvalidOperationException: 'session not created: This version of ChromeDriver only supports Chrome version 85 (SessionNotCreated)'
TypeScript
0 vote178 views1 answer
The marking menu shortcuts to context-sensitive commands and tools. Marking menu accessed for objects:
TypeScript
-1 vote154 views2 answers
What is a react hook
TypeScript
26 votes129 views2 answers
Typescript check if object has key
TypeScript
0 vote134 views1 answer
Whats app link target blank
TypeScript
0 vote141 views1 answer
R merge lists
TypeScript