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 vote106 views1 answer
Best way to round to two typescript
TypeScript
4 votes106 views1 answer
Ionic toast
TypeScript
9 votes125 views2 answers
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
TypeScript
47 votes140 views9 answers
Cannot be loaded because running scripts is disabled on this system
TypeScript
3 votes116 views1 answer
Typescript react input type
TypeScript
-3 votes182 views1 answer
Cool_beasts = {"octopuses":"tentacles", "dolphins":"fins", "rhinos":"horns"} for ___ in cool_beasts.items(): print("{} have {}".format(___))
TypeScript
18 votes106 views3 answers
Typescript sort array of objects
TypeScript
3 votes100 views2 answers
Flutter dialog prevent close
TypeScript
0 vote105 views2 answers
Typescript encode url
TypeScript
1 vote114 views4 answers
How to execute scripts when a button gui is pressed roblox
TypeScript