在vue.js中查看更新后执行代码

Question

我想执行一项任务（滚动到底部，因为添加的新元素）视图后的已被vue更新。

这是我的代码：

pixel(0,3) compare to pixel(0,4) = 22%
verticalArray[3] += 80% (22)
pixel(1,3) compare to pixel(1.4) = 10%
verticalArray[3] += 72% (32)
pixel(2,3) compare to pixel(2,4) = 76%
verticalArray[3] += 95% (108)
...

如您所见，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); } 之后调用this.scrollDown();，因此视图未立即更新，滚动效果不佳。 应该怎么做？

Answer 1

尝试使用以下方法等待DOM更新：

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