无法为textarea获取scrollHeight的正确值 - VueJs,Vuetify

时间:2018-03-28 15:24:43

标签: vue.js vuejs2 vuetify.js

我试图获取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提交了,请输入任何内容)

1 个答案:

答案 0 :(得分:2)

this.$refs.messageBox.$el.scrollHeight是指由Vuetify生成的父节点input-group,这个值似乎是错误的,我们只需要将一个选择器添加到tearea节点,如this.$refs.messageBox.$el.querySelector('textarea').scrollHeight