Vue.js: event after v-for is done
I had a similar issue but I took a different approach using the vue.nextTick(). I needed to be sure the v-for had finished rendering as the component will not re-render immediately, It will update on the next “tick” when the queue is empty.
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
Have you tried using watch?
var vm = new Vue({ data: { messages: [] }, watch: { 'messages': function (val, oldVal) { //Scroll to bottom }, }})Edit: Please see the other answer, as this solution requires using the nextTick function to ensure the DOM is updated.