CODEWITHSUNDEEP
vue.js
jigarzon
jigarzon

Reputation: 1228

Execute code after view update in vue.js

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?

Upvotes: 1

Views: 1385

Answers (1)

Maarten van Tjonger
Maarten van Tjonger

Reputation: 1927

Try waiting for the DOM to be updated using:

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

Upvotes: 4

Related Questions