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 vote285 views1 answer
Entity service async requests and how to make them synch
TypeScript
0 vote308 views2 answers
Localstorage getitem angular
TypeScript
0 vote293 views1 answer
Find elements by xpath with matching text
TypeScript
0 vote365 views1 answer
Where do you store your test data
TypeScript
-1 vote274 views1 answer
Create database if not exists mysql true spring boot
TypeScript
0 vote308 views1 answer
React-native-size-matters npm
TypeScript
0 vote306 views1 answer
Push array elements if not exists mongoose
TypeScript
1 vote345 views1 answer
How to convert millisecond to second to date momentjs
TypeScript
1 vote326 views3 answers
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
TypeScript
1 vote341 views1 answer
A device that interconnects two local area networks that both have a medium access control sublayer.
TypeScript