呈现数据时，Vue Js 会发出事件

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

问题是在ChatLog 和ChatMessage 呈现消息之前调用了最后一个方法（scrollToEnd），所以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));
});