Question

我希望文本区域与value内容一样大。目前textarea是标准尺寸，我必须滚动才能查看整个value内容

<v-flex xs12 sm6 md6 lg4 pt-5 pb-5>
                    <v-textarea
                      auto-grow
                      label="Comments"
                      id="comment"
                      counter
                      :value="props.item.SurveyResults[0].comment"
                    ></v-textarea>
                  </v-flex>

Answer 1

如果默认情况下要执行的操作是一行，直到您增加到更多行，这就是方法：https://codepen.io/Helene-Andre/pen/OrWgyz?editors=1010

只需添加属性rows="1"

VUE模板

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-textarea rows="1"
                      auto-grow
                      label="Comments"
                      id="comment"
                      counter
                      :value="comment"
                    ></v-textarea>
      </v-container>
    </v-content>
  </v-app>
</div>

JS

new Vue({ 
  el: '#app',
  data: () => ({
    comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus non itaque possimus dicta sunt dolorem cum est autem reprehenderit architecto! Autem, aperiam, magni. Mollitia dolorum modi, tempora enim vero deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus non itaque possimus dicta sunt dolorem cum est autem reprehenderit architecto! Autem, aperiam, magni. Mollitia dolorum modi, tempora enim vero deserunt."
  })
})

Answer 2

在用来显示您可以执行此操作的字段之前，我曾经使用过一种解决方法

autosize(document.querySelectorAll('textarea'));
var resizeEvent = new Event("resize");
window.dispatchEvent(resizeEvent);

不确定是否需要放置v-textarea或textarea，我使用的是Vue的2.1.10版本

自动将Vuetify文本区域调整为值大小

2 个答案: