Axios响应

Question

我在使用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;
        });
    }

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

Answer 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;
            }
        )
    })
}