Javascript Vue滚动div至顶部内部方法

学习Vue。当找到新的聊天记录时，尝试使聊天窗口div滚动到顶部

我的Vue组件是：

const app = new Vue({ 
    el: '#toolbar-chat',

    data: {
        messages: []
    },

    created() {
        this.fetchMessages();

        Echo.private(chat_channel)
            .listen('ChatMessageSent', (e) => {
                this.messages.unshift({
                    message: e.data.message,
                    player: e.data.player.nickname
                });
            });
    },

    methods: {
        fetchMessages() {
            axios.get(chat_get_route)
                .then(response => {
                    this.messages = response.data;
                });
        },

        addMessage(message) {
            this.messages.unshift(message);

            this.$nextTick(() => {
                this.$refs.msgContainer.scrollTop = 0;
            });

            axios.post(chat_send_route, message)
                .then(response => {
                    console.log(response.data);
                });

        }
    }
});

我的聊天信息模板

<template>
    <div ref="msgContainer" class="toolbar-chat">
        <div class="row">
            <div class="col-xs-12" v-for="message in messages">
                <strong class="primary-font">
                    {{ message.player.nickname }}:
                </strong>
                {{ message.message }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['messages']
    };
</script>

{{message.player.nickname}}：

{{message.message}}
导出默认值{
道具：[“消息”]
};

我的聊天发送模板

<template>
    <div class="input-group input-group-sm">
        <input id="btn-input" type="text" class="form-control" value="" required="required"  maxlength="140" placeholder="Type your message here..." v-model="newMessage" @keyup.enter="sendMessage">
        <div class="input-group-btn">
            <button class="btn btn-primary" type="button"  id="btn-chat" @click="sendMessage">
                <i class="fa fa-paper-plane"></i>
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['player'],

        data() {
            return {
                newMessage: ''
            }
        },

        methods: {
            sendMessage() {
                this.$emit('chatmessagesent', {
                    player: this.player,
                    message: this.newMessage
                });

                this.newMessage = ''
            }
        }
    }
</script>

导出默认值{
道具：[“玩家”]，
数据（）{
返回{
新消息：“”
}
},
方法：{
sendMessage（）{
此.$emit（'chatmessagesent'{
玩家：这个，玩家，
message:this.newMessage
});
this.newMessage=“”
}
}
}

在我的页面中，我包含了模板

<div class="col-xs-12 col-md-4" id="toolbar-chat">
    <chat-messages :messages="messages"></chat-messages>
    <chat-form v-on:chatmessagesent="addMessage" :player="{{ Auth::user() }}"></chat-form>
</div>

一条消息会添加到列表中，但我收到以下错误：

[Vue warn]：nextTick中的错误：“TypeError:无法设置未定义的属性'scrollTop'”

---

这是元素的命名方式吗（camelCase）？我遗漏了什么。

因为要滚动的元素在组件中，所以应该在该组件上实现一个可以调用的方法

例如，在您的

聊天信息
组件中

methods: {
  scrollToTop () {
    this.$el.scrollTop = 0
  }
}

<chat-messages ref="messages"...

在Vue实例中，为该组件添加一个
ref

methods: {
  scrollToTop () {
    this.$el.scrollTop = 0
  }
}

<chat-messages ref="messages"...

我们可以为此目的使用方法，例如：

this.$refs.yourRef.$el.scrollIntoView();

模板是什么样子的
$refs
仅引用具有
ref
属性的子元素。如果您想要根元素（即
#toolbar chat
），请使用
this.$el
Hi@Phil，谢谢您的回复。我用所有的片段更新了我的Q。我会看看你的建议，看看你想滚动哪个
div
吗？抱歉@Phil，根据你在我更新上述内容之前的回复。我添加了一个
ref=“msgContainer”
并在
$nextTick
中调用它。这不起作用-
这个。$refs.messageHolder.scrollDown（）不是一个函数
@Peter考虑到我的答案没有“scrollDown”方法，我并不感到惊讶。你应该提出一个新问题啊，让我澄清一下。在您的代码示例中，.refs.messageHolder.scrollToTop（）似乎不起作用（我有一个不同的函数名，但在其他方面是相同的）。不过别担心，我找到了另一个解决办法。谢谢@彼得韦那可能是因为我回答中的
ref
是
messages
，而不是
messageHolder
。它还需要是一个组件，而不是一个常规的HTML元素才能公开methods@PeterWeyand如果没有任何其他上下文（例如您的实际代码），您的评论不会向本文添加任何内容。因为注释不是代码的地方，所以您应该真正打开一个新的问题。