VueJS-数据更改时如何滚动底部

Question

在我的组件中，我有一个消息数组。

data: function () {
        return {
            messages: [],
            first_load: false
            ...
        }

在创建我的组件后，该消息数组最初由 Ajax 调用填充。数据来自服务器后，我只需将其推送到消息变量中，它会令人惊讶地在 UI 中绘制所有消息，但在推送数据后，我尝试滚动到 UI 底部，以便用户仅观看最新内容。

data.body.data.messages.map((message) => {
    this.messages.push(message)
}
this.scroll_bottom()

我注意到，在推送数据后执行简单的 javascript 滚动底线将不起作用，因为 UI 会异步刷新（当我 .push 到我的数组时，它不会在同步 UI 之前执行下一行），所以我最终添加超时然后滚动底部，但我认为这是非常可耻的。

我的黑客：

watch: {
    messages:{
        handler: function (val, oldVal) {
            if (!this.first_load) {
                this.first_load = true
                setTimeout(() => {
                    this.scroll_bottom()
                }, 1000);
            }
        },
        deep: true
    }
}

关于如何利用这一点有什么想法吗？谢谢！

Answer 1

您可以使用updated生命周期钩子在 DOM 更新后执行某些操作。看一下官方文档。

updated: function () {
    //scroll down logic here
}

如果你的updated逻辑被快速调用，你总是可以使用合适的方法来减慢速度。