javascript(vue.js) にてスクロールを一番下にもっていきたい

Question

vue.jsにてfacebookのchat機能のような物を作っております。
その中で「スクロールを常に一番したにする」実装で
https://jsfiddle.net/my54bhwn
を参考にして

var container = this.$el.querySelector(".chat-log");
container.scrollTop = container.scrollHeight;

といたしました。
しかしこの参考にしたURLもそうなのですが、スクロールの一番下まで行くわけでなく若干上になります。これを一番下までもっていくためにはどうするのか、また何か違う解決方法(paddingの設定など？？)分かる方がいれば教えていただけますでしょうか。
よろしくお願いいたします。

Answer 1

DOMが挿入される前に、scrollの処理を行っているからです。
以下のように修正すればDOM更新後にscroll処理が行われると思います。
Vue.nextTick関数を使うことで、DOM更新後の処理を記載できます。

        this.items.push("Item #"+this.items.length);
        var $this = this;
        Vue.nextTick(function() {
            $this.scrollToEnd();
        });

Comments

[kazoogon]

回答ありがとうございます。
nextTickで思ったように反映されました。

しかし
mounted() {
var self = this;
Vue.nextTick(function() {
self.scrollToEnd();
});
},
と最初からスクロールを一番下にしようとすると反映しません、、、これももしわかれば教えていただきたいです。
よろしくお願いいたします。

[kazoogon]

(追記)
vue-routerを使用しこのchatのページを表示するようにした
　→vue componentを使用
　→するとNextTickが効かなくなりました。。

[退会済みユーザー]

component内ならば this.$nextTick でどうですか？