VueJS - 如何在数据更改时滚动底部

Question

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!

Answer 1

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.

Answer 2

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();
       });
    }
}

Answer 3

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();
}

Answer 4

在 v-for 之前在 div 中使用 v-chat-scroll