我正在尝试使用Vue.js构建一个简单的聊天应用程序。我的问题是,当写入新消息时,消息区域需要滚动到底部。
我用v-for指令循环遍历消息。当v-for更新DOM时是否有事件?
我已经这样做了,消息区div监听组件的消息数组。我试过这样,在我将消息附加到数组的同一个函数中,它会将消息区div的scrollTop设置为99999.但问题是v-for没有更新DOM,所以它不会滚动到正确的位置。
答案 0 :(得分:33)
我有类似的问题,但我使用vue.nextTick()
采取了不同的方法。我需要确保v-for
已完成呈现,因为组件不会立即重新呈现,当队列为空时,它将在下一个“tick”时更新。
Vue.component('message', {
data() {
return {
message: []
}
},
methods: {
updateMessageArray(newMessage) {
this.message.push(newMessage);
this.$nextTick(() => {
// Scroll Down
})
}
}
})
https://vuejs.org/v2/api/#Vue-nextTick
https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
答案 1 :(得分:3)
您是否尝试过使用watch
?
var vm = new Vue({
data: {
messages: []
},
watch: {
'messages': function (val, oldVal) {
//Scroll to bottom
},
}
})
编辑:请参阅其他答案,因为此解决方案需要使用nextTick
函数来确保更新DOM。