텍스트 영역의 스크롤 하이트의 올바른 값을 얻을 수 없습니다(VueJs, Vuetify).

텍스트 영역의 스크롤 하이트의 올바른 값을 얻을 수 없습니다(VueJs, Vuetify).

scrollHeight 값을 가져오려고 합니다.textearafile, 문제는 문서 오브젝트를 사용하는 경우입니다.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 값을 보려면 텍스트 영역이 입력된 경우 아무 것도 입력하십시오.)

그this.$refs.messageBox.$el.scrollHeight상위 노드를 참조합니다.input-groupVuetify에 의해 생성된 값은 잘못된 것으로 보입니다.이렇게 tearea 노드에 셀렉터를 추가하는 것만으로 충분합니다.this.$refs.messageBox.$el.querySelector('textarea').scrollHeight

언급URL : https://stackoverflow.com/questions/49538421/cant-get-the-correct-value-of-scrollheight-for-a-textarea-vuejs-vuetify