Vue.js: Event After V-for Is Done

I am trying to build a simple chat app with Vue.js. My problem is that the message area needs to scroll to the bottom when a new message is written. I looping through the messages

Solution 1:

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

Solution 2:

Have you tried using watch?

var vm = newVue({
  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.