无法为 textarea 获取正确的 scrollHeight 值 - VueJs，Vuetify答案

【问题标题】：Can't get the correct value of scrollHeight for a textarea - VueJs, Vuetify无法为 textarea 获取正确的 scrollHeight 值 - VueJs，Vuetify
【发布时间】：2018-09-07 08:52:35
【问题描述】：

我正在尝试获取 texteara 归档的值 scrollHeight，问题是当我使用文档对象时：document.querySelector("#textarea-element").scrollHeight，我有一个正确的值，但是当我尝试使用refs 时，值是错误的并且没有改变。我已经为这些行为做了一个详细的 jsfiddle，请看下面：

 new Vue({ 
  el: '#app' ,
  data: {
    height: 'auto',
    scrollHeightUsingRefsVuejs:'',
    scrollHeightUsingDocumentObject: ''
  },
   methods:{
    resizeTextarea (e) {
      this.scrollHeightUsingRefsVuejs =              this.$refs.messageBox.$el.scrollHeight

      this.scrollHeightUsingDocumentObject =       document.querySelector("#textarea-element").scrollHeight
      
      console.log(this.scrollHeightUsingRefsVuejs, this.scrollHeightUsingDocumentObject)
    }
  }
 })

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify@1.0.11/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify@1.0.11/dist/vuetify.js"></script>
<div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-text-field
            color="cyan darken"
            label="Text field"
            multi-line
            rows="2"
            placeholder="Start typing..."
            ref="messageBox"
            @keydown.native="resizeTextarea"
            :style="{height: height}"
            id="textarea-element"
            ></v-text-field>
         <p>
         Scroll Height Using Refs Vuejs : <strong>{{ scrollHeightUsingDocumentObject}}</strong>
         </p>
         <p>
         <span style="color:red">(Wrong)</span> Scroll Height Using Refs Vuejs : <strong>{{ scrollHeightUsingRefsVuejs }}</strong>
         </p>
        </v-container>
      </v-content>
    </v-app>
  </div>

（要查看 scrollHeight 的值，如果 textearea 归档，请输入任何内容）

【问题讨论】：

您应该在帖子中添加代码，而不是引用外部站点
此处添加的代码

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

this.$refs.messageBox.$el.scrollHeight 指的是由 Vuetify 生成的父节点 input-group，这样看起来值是错误的，我们只需要像 this.$refs.messageBox.$el.querySelector('textarea').scrollHeight 这样在 Tearea 节点中添加一个选择器

【讨论】：