Question

在vuejs中，我正在开发两个用户之间的对话聊天。我有这样的嵌套组件

Chat
    ->ChatLog
        -> ChatMessage
    ->ChatComposer

聊天组件具有聊天结构（引导程序中的一个面板），也是我在加载页面时使用Axios检索的地方，来自数据库的所有消息。

axios
.get('/conversation/'+this.conversation.id+'/message')
.then((response) => {
    this.messages = response.data;
    this.manageHeightChat();
    this.scrollToEnd();
});

当我收到所有消息后，我将它们发送到ChatLog组件

<chat-message v-for="message in messages" v-bind:message="message" v-bind:user="user"></chat-message>

将每条消息发送到ChatMessage组件。

因此，当使用所有消息调用回调方法时，会将它们分派给其他组件，然后调用两个方法manageHeightChat和scrollToEnd。

scrollToEnd() {
    var container = this.$refs.chatlog;
    container.scrollTop = container.scrollHeight;
    console.log(container.scrollHeight);
}

问题是在scrollToEnd和ChatLog呈现消息之前调用了最后一个方法（ChatMessage），因此container.scrollHeight的大小不合适。

为了验证它，我添加了类似的内容：

setTimeout(function () {
    this.scrollToEnd();
}.bind(this), 1000);

一切都很好。

那么你如何以及在哪里将一些事件告诉聊天内容已呈现并且我可以调用scrollToEnd方法？

Answer 1

见nextTick。设置消息数据时，需要等待Vue更新DOM。这就是nextTick的用途。使用它就像使用setTimeout

一样

axios
.get('/conversation/'+this.conversation.id+'/message')
.then((response) => {
    this.messages = response.data;
    this.manageHeightChat();
    this.$nextTick(this.scrollToEnd.bind(this));
});

Vuejs在呈现数据时发出事件

1 个答案: