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>
florinrelea