Risse Risse - 4 years ago 219
Javascript Question

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 with v-for directive. Is there an event when v-for has updated the DOM?

I have made it so that the message area div listens to component's message-array. I tried so that in the same function that I am appending the message to the array, it would set the message area div's scrollTop to 99999. But the problem is that v-for is not done updating the DOM, so it will not scroll to the correct point.

Answer Source

Have you tried using watch?

var vm = new Vue({
  data: {
    messages: []
  },
  watch: {
    'messages': function (val, oldVal) {
      //Scroll to bottom
    },
  }
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download