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

10 votes189 views2 answers
How to use variable as object key in typescript
TypeScript
35 votes210 views2 answers
Typescript last index of array
TypeScript
0 vote198 views1 answer
Haproxy stats config
TypeScript
6 votes202 views1 answer
Check if key is in the js object
TypeScript
38 votes241 views2 answers
Npm ng.ps1 cannot be loaded because running scripts is disabled on this system grepper
TypeScript
1 vote183 views1 answer
Insert value to the top of array in angular
TypeScript
0 vote174 views1 answer
Testing techniques
TypeScript
1 vote217 views1 answer
Typescript style type
TypeScript
0 vote190 views1 answer
Wherein typeorm
TypeScript
13 votes210 views4 answers
Ionic generate resources
TypeScript