4

In my component, I got a messages array. 

data: function () {
        return {
            messages: [],
            first_load: false
            ...
        }

This messages array get initially populated with an Ajax call after the creation of my component. After the data comes from the server I just push it into my messages variable, it paints all messages in the UI amazingly but after it gets pushed I try to scroll bottom my UI so the user watches only the latest content.

data.body.data.messages.map((message) => {
    this.messages.push(message)
}
this.scroll_bottom()

I noticed that performing a simple javascript scroll bottom line just after pushing my data won't work as the UI gets refreshed asynchronously (When i .push to my array it won't execute next line before syncing the UI), so I ended up adding a timeout and then scrolling bottom, but this is super shameful I think.

My hack:

watch: {
    messages:{
        handler: function (val, oldVal) {
            if (!this.first_load) {
                this.first_load = true
                setTimeout(() => {
                    this.scroll_bottom()
                }, 1000);
            }
        },
        deep: true
    }
}

Any ideas on how to leverage this? Thanks!

Sumithran
  • 6,217
  • 4
  • 40
  • 54
damuz91
  • 1,461
  • 2
  • 21
  • 37
  • 1
    I don't think using a timeout is that bad. You can clear the existing timeout and create a new one when the new data comes. Also you can use a debounce function to avoid rapid timeout creation. – nipunasudha Aug 15 '18 at 04:04
  • 1
    Take a look at Vue life-cycle hooks https://vuejs.org/v2/guide/instance.html you can use 'beforeUpdate' & 'updated' hooks for timing your scrolling. – nipunasudha Aug 15 '18 at 04:09
  • 1
    have you tried nextTick ? – Jacob Goh Aug 15 '18 at 04:16
  • 1
    Is this what you're looking for? https://stackoverflow.com/q/40730116/2813263 – Domino Aug 15 '18 at 04:22
  • @nipunasudha Thanks for your comment, actually is quite a good thought. I just read the 'updated' method and that is what in theory im looking for. I just tried and it works good, except that for some reason i am doing a lot of changes to my data so it has some problems, but again in theory this is the answer, if you want go ahead and post it. – damuz91 Aug 15 '18 at 04:30
  • @JacqueGoupil, Actually that is the code inside my scroll_bottom() method, hehe thanks but i was looking for the actual logic that will let me scroll bottom after the UI updates itself. Thanks! – damuz91 Aug 15 '18 at 04:32

4 Answers4

5

You can use updated life-cycle hook to do something after a DOM update. Take a look at the official documentation.

updated: function () {
    //scroll down logic here
}

If your updated logic is being called rapidly, you can always use a suitable denouncing method to slow down.

tony19
  • 125,647
  • 18
  • 229
  • 307
nipunasudha
  • 2,427
  • 2
  • 21
  • 46
3

I think that watch is the right approach to that, but try using Vue.nextTick or this.$nextTick (to iterate just current component update cycle) instead of timeout:

watch: {
    messages: function (val, oldVal) {
       // DOM not updated yet

       this.$nextTick(function () {
           // DOM updated

           this.first_load = true;
           this.scroll_bottom();
       });
    }
}
Michael
  • 1,058
  • 10
  • 17
1

If your scrollable div's id is cont use the below method to scroll.

scroll() {
  document.getElementById('cont').scrollTop = document.getElementById('cont').scrollHeight;
}

And you have to call this inside updated hook.

updated() {
  this.scroll();
}
anjuc
  • 159
  • 2
  • 10
1

Use v-chat-scroll in div before v-for

Tony
  • 259
  • 3
  • 13