axios响应后scrollTop不起作用答案

【问题标题】：scrollTop does not work after Axios responseaxios响应后scrollTop不起作用
【发布时间】：2018-05-08 19:02:25
【问题描述】：

我在使用 Laravel（使用 Vue.js、Pusher、Echo）构建实时聊天时遇到问题。这里我有3种方法：

created() {
    this.fetchMessages();
    this.group = $('#group').data('group');
    Echo.private('chat.' + this.group)
        .listen('MessageSent', (e) => {
            this.messages.push({
                text: e.message.text,
                user: e.user,
                author: e.user.name,
                avatar: e.message.avatar
            });
        });
},

methods: {
    fetchMessages() {
        axios.get('/chat/check/' + this.group).then(response => {
            this.messages = response.data;

        });
    },

    addMessage(message) {
        axios.post('/chat/add', message).then(response => {
            this.messages.push(response.data);
        });

    }
}`

在这些方法之后，我需要将<div id="chat"> 滚动到底部。我尝试了很多选择，例如： document.getElementById('chat').scrollTop=9999

同样使用 jQuery $('#chat')...,

一些插件，如vue-scroll-chat 和 jQuery 一样，但它们都不起作用。此命令在方法 fetchMessages 和 addMessage 中不起作用还有……

addMessage(message) {
        axios.post('/chat/add', message).then(response => {
            this.messages.push(response.data);
            document.getElementById('chat').scrollTop=9999;
        });
    }

不起作用。我该如何解决？

【问题讨论】：

UPD：也许我对聊天的概念有误。因为在流行社交中发送消息后，我看不到任何滚动效果和其他效果。是否还有其他方法可以制作漂亮的消息列表和附加消息？
模板是什么样子的？

标签： javascript jquery laravel vue.js axios

【解决方案1】：

我认为您需要将document.getElementById('chat').scrollTop=9999; 添加到Vue.$nextTick 以便信息有时间出现并在启动滚动效果之前影响元素。

您可能还想在您的聊天元素中添加ref="chat"，以便您可以通过 vue 引用引用 scrollTop；它看起来像这样

addMessage(message) {
    axios.post('/chat/add', message).then(response => {
        this.messages.push(response.data)
        this.$nextTick(
            () => {
                this.$refs.chat.scrollTop=9999;
            }
        )
    })
}

【讨论】：