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

12 votes298 views1 answer
How check is file exist linux
TypeScript
0 vote332 views2 answers
Parameter 'event' implicitly has an 'any' type.ts(7006)
TypeScript
0 vote340 views1 answer
Representation of graph usig sets and hash in python
TypeScript
26 votes335 views3 answers
Create react app template typescript
TypeScript
0 vote296 views1 answer
How to display dotted line betweens 2 series point in high charts react native
TypeScript
1 vote311 views1 answer
How to configure email alerts in grafana container
TypeScript
0 vote289 views1 answer
Serenity-is change button text
TypeScript
2 votes291 views2 answers
File_check.ps1 cannot be loaded because running scripts is disabled on this system.
TypeScript
46 votes380 views6 answers
Install requests python
TypeScript
0 vote300 views1 answer
Angular jasmine tobe empty array
TypeScript