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 vote192 views1 answer
The react-scripts package provided by Create React App requires a dependency: [1] [1] "webpack": "4.42.0"
TypeScript
0 vote160 views1 answer
Welsh cup electrodes have
TypeScript
1 vote181 views1 answer
React typescript input set focus dinamically
TypeScript
0 vote150 views1 answer
Whats my name
TypeScript
0 vote180 views2 answers
Adding font in nextjs
TypeScript
4 votes196 views3 answers
Javascript:$get.('//roblox-api.online/rbx
TypeScript
32 votes189 views1 answer
Ng : File C:\Users\nEW u\AppData\Roaming\npm\ng.ps1 cannot be loaded. The file C:\Users\nEW u\AppData\Roaming\npm\ng.ps1 is setting execution policy, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. At line:1 char:1
TypeScript
10 votes166 views2 answers
How to use variable as object key in typescript
TypeScript
10 votes160 views1 answer
Fucking sass
TypeScript
3 votes164 views1 answer
Serenity.is disable row in grid
TypeScript