我试图获取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提交了,请输入任何内容)
答案 0 :(得分:2)
this.$refs.messageBox.$el.scrollHeight
是指由Vuetify生成的父节点input-group
,这个值似乎是错误的,我们只需要将一个选择器添加到tearea节点,如this.$refs.messageBox.$el.querySelector('textarea').scrollHeight