Vue实例正在管理的根DOM元素。
这个$埃尔
是
这个
#messages
div,不需要从DOM中获取它。
那么,你可以使用
this.$el.lastElementChild.offsetTop
在这里,我简化了一点模板,使其直截了当。
<template>
<ul id="messages">
<li v-for="msg in messages.slice().reverse()">{{ msg.message }}</li>
</ul>
</template>
<script>
export default {
name: 'messages',
data() {
return { messages: [] };
},
mounted() {
this.getMessages();
},
updated() {
this.$nextTick(() => this.scrollToEnd());
},
methods: {
async getMessages () {
},
scrollToEnd: function () {
this.$el.scrollTop = this.$el.lastElementChild.offsetTop;
}
}
}
</script>
<div>
容器,您可以使用
ref
。
<template>
<div id="messages">
<ul ref="list">
<li v-for="msg in messages.slice().reverse()">{{ msg.message }}</li>
</ul>
</div>
</template>
然后在组件中,可以使用
this.$refs.list
。
参考
用于注册对元素或子元素的引用
组成部分引用将在父项下注册
组件
$refs
对象如果在普通DOM元素上使用,则
引用将是该元素;如果用于子组件,则
引用将是组件实例。
虽然Vue示例通常使用本机DOM API,但使用
参考
在这种情况下更容易。