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

1 vote179 views1 answer
No provider for ChildrenOutletContexts Angular
TypeScript
0 vote246 views1 answer
Cannot find module 'date-fns' or its corresponding type declarations.ts(2307)
TypeScript
0 vote145 views2 answers
Extend type typescript
TypeScript
0 vote205 views1 answer
Pandas value_counts multiple columns
TypeScript
-1 vote148 views2 answers
Hhow to remove elements from java
TypeScript
0 vote153 views1 answer
Whats a typedef in c++
TypeScript
6 votes147 views4 answers
Data
TypeScript
0 vote145 views1 answer
Typescript number to hex string
TypeScript
-1 vote154 views2 answers
ERROR in node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.d.ts:230:9 - error TS1086: An accessor cannot be declared in an ambient context. 230 set ngbPanelToggle(panel: NgbPanel);
TypeScript
47 votes175 views6 answers
Angular date pipe
TypeScript