javascript - Vue方法将div滚动到顶部

Question

我在学习vue .我有以下方法，我使用 id="toolbar-chat" 将聊天消息添加到 div .这个 div 允许在 y 轴上滚动，我希望 div 每次添加新消息时都跳到顶部。为什么我的 JS 不工作？

    document.getElementById("toolbar-chat").scrollTop = 0;

我的 vue方法:

    methods: {
        addMessage(message) {
            this.messages.unshift(message);

            document.getElementById("toolbar-chat").scrollTop = 0;

            axios.post(chat_send_route, message)
            .then(response => {
                console.log(response.data);
            });

        }
    }

Answer 1

这是由于 vue 异步更新 dom 的方式。见 Reacivity in depth(Async update Queue)

要立即反射(reflect)更改，请使用 vm.$nextTick(callback)

而不是使用 document.getElementById() 查询 dom 元素我建议添加 ref归因于您的toolbar-chat元素并在您的方法中使用 this.$refs 引用它.见 docs更多关于 ref属性

  <div id="toolbar-chat" ref="toolbarChat"></div>

所以你的方法应该是

methods: {
    addMessage(message) {
        this.messages.unshift(message);
        this.$nextTick(() => {
            this.$refs.toolbarChat.scrollTop = 0;
        });

        axios.post(chat_send_route, message)
        .then(response => {
            console.log(response.data);
        });

    }
}

这是工作 fiddle