Vue.js vuetify v-textarea 未在未扩展的 v-layout 内正确自动增长

Question

我希望 v-textarea 根据放置在其中的文本数量来增长和缩小，但是我在下面遇到了这个问题，其中 v-textarea 位于关闭（未展开）的 v-layout 内。

使用这个

<v-flex md8 px-1 offset-md2>
   <v-textarea v-model="comments" @input="inputComments" rows="1" auto-grow :disabled="!editMode"></v-textarea>
</v-flex>

该字段仅显示 1 行且不会自动增长。您可以看到第二行没有完全显示。

当我删除 "rows="1" 时，这就是我看到的（额外的空白），因为 textarea 的默认行是 5

有没有办法让它根据文本行自动增长，或者在扩展后重新自动增长？我以为这就是它应该如何工作，但我可能错了！

仅供参考 - 此文本区域位于隐藏部分中，仅在该部分展开时才显示。我在页面上的其他文本区域（不在扩展区域中）显示/自动增长就好了！

Answer 1

我遇到了类似的问题，并通过将 的key属性设置v-textarea为变量并手动更改所述变量来解决它，从而强制组件重新渲染。重新渲染后，auto-grow工作正常。

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

至于何时调用该forceReRender函数，这将取决于您的代码中的细节。我v-textarea在v-stepper选项卡上的一个组件中使用它，发现当v-stepper's 步骤更改为带有此组件的步骤时触发开关使其工作。

我猜这与 vuetify 上的以下开放错误有关，也与自动增长有关：https : //github.com/vuetifyjs/vuetify/issues/6995

Answer 2

当具有自动增长功能的v-textarea位于v-expansion-panel-content内部时，我遇到了类似的问题

只需用v-lazy组件包裹它，自动增长就应该按预期工作

 <v-expansion-panel-content>
    <v-lazy>
      <v-textarea
       :key="autoGrowHack"
       v-model="textAreaVal"
       auto-grow
      ></v-textarea>
   </v-lazy>
 </v-expansion-panel-content>