小编joe*_*now的帖子

我正在尝试使用 Vue 和 Express 制作一个聊天应用程序。

目前，我想让包含消息的容器在发送新消息时自动滚动到底部。scrollToEnd我尝试使用一个选择 div 容器并将其分配scrollHeight给以下函数来做到这一点scrollTop：

scrollToEnd: function () {
    var messages = this.$el.querySelector('#messages')
    messages.scrollTop = messages.scrollHeight
}

这会产生以下错误：

类型错误：无法读取 null 的属性“scrollHeight”

由于某种原因，使用querySelector总是返回 null，当我在其他元素上测试它时也是如此。

下面可以找到该组件的完整代码。

<template>
    <div id="messages">
        <ul>
            <li v-for="msg in messages.slice().reverse()">{{ msg.message }}</li>
        </ul>
    </div>
</template>

<script>
import MessageService from '@/services/MessageService'

export default {
    name: 'messages',
    data () {
        return {
            messages: []
        }
    },
    mounted () {
        this.getMessages()

        this.$root.$on('newMessage', (msg) => {
            this.message = msg
            this.getMessages()
            this.scrollToEnd() …