我在学习vue。我有以下方法，将聊天消息添加到 div 中id="toolbar-chat"。这个 div 允许在 y 轴上滚动，我希望每次添加新消息时 div 都能跳到顶部。为什么我的 JS 不起作用？
document.getElementById("toolbar-chat").scrollTop = 0;
My vue method:
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);
});
}
}
这是由于 vue 异步更新 dom 的方式造成的。看深度反应性（异步更新队列）
-
要立即反映更改，请使用vm.$nextTick(callback)
-
而不是使用查询 dom 元素document.getElementById()我建议添加一个ref归因于你的toolbar-chat元素并在您的方法中引用它this.$refs. See 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
