Execute code after view update in vue.js

Question

I want to perform a task (scrolling to bottom, since new elements where added) after a view has been updated by vue.

Here is my code:

export default {
    mounted() {
        this.connect();
    },
    connection: null,
    methods: {
        connect: function () {
            ...
        },
        onMessage: function (msg) {

            this.messages.push(msg);
            this.scrollDown();

            return true;
        }, 
        scrollDown: function () {
            $("html, body").animate({
                'scrollTop': $(this).offset().top
            }, 100);
        }

As you can see, the this.scrollDown(); is invoked after this.messages.push(msg);, so since the view is not updated immediately the scroll is not well performed. How is it supposed to be made?

It sounds like you want to perform this in the updated event? — user820304
– user820304, Commented Jul 26, 2017 at 22:50

Maarten van Tjonger · Accepted Answer · 2017-07-26 22:52:18Z

4

Try waiting for the DOM to be updated using:

this.$nextTick(function () {
  this.scrollDown();
});

answered Jul 26, 2017 at 22:52

Maarten van Tjonger

1,9571 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Execute code after view update in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related