Vue.js vuetify v-textarea not auto growing correctly inside v-layout that's un expanded
I have had a similar problem, and solved it by setting the key
attribute of the v-textarea
to a variable and changing said variable manually, forcing the component to re-render. After the re-render, auto-grow
worked correctly.
<template>
<v-textarea
:key="autoGrowHack"
v-model="textAreaVal"
auto-grow
></v-textarea>
</template>
<script>
export default {
data() {
return {
autoGrowHack: false,
textAreaVal: "lorem ipsum",
}
},
methods: {
forceReRender() {
this.autoGrowHack = !this.autoGrowHack;
}
},
}
</script>
As far as when to call the forceReRender
function, that's going to depend on specifics in your code. I was using this v-textarea
inside a component on a v-stepper
tab, and found that triggering the switch when the v-stepper
's step is changed to the one with this component on it made it work.
I'm guessing this is related to the following open bug on vuetify that also relates to auto-grow: https://github.com/vuetifyjs/vuetify/issues/6995