Javascript Vue.js:完成v-for后的事件

我正在尝试用Vue.js构建一个简单的聊天应用程序。我的问题是，当写入新消息时，消息区域需要滚动到底部

我使用v-for指令循环遍历消息。v-for更新DOM时是否发生事件

---

我这样做是为了让messageareadiv监听组件的消息数组。我试着在将消息附加到数组的同一个函数中，将消息区域div的scrollTop设置为99999。但问题是v-for没有更新DOM，因此它不会滚动到正确的点。

您是否尝试过使用

监视

var vm = new Vue({
  data: {
    messages: []
  },
  watch: {
    'messages': function (val, oldVal) {
      //Scroll to bottom
    },
  }
})

编辑：请查看另一个答案，因为此解决方案需要使用
nextTick
函数来确保DOM得到更新。
我也有类似的问题，但我使用
vue.nextTick（）
采用了不同的方法。我需要确保
v-for
已完成渲染，因为组件不会立即重新渲染，它将在队列为空时在下一次“勾选”时更新

Vue.component('message', {
  data() {
    return {
      message: []
    }
  },
  methods: {
    updateMessageArray(newMessage) {
      this.message.push(newMessage);

      this.$nextTick(() => {
         // Scroll Down
      })
    }
  }
})


我不知道在完成
v-for
循环后是否有钩子或事件，但您可以像在每个for中一样，比较实际索引以检查它是否是最后一次迭代？类似于
$index===array.length-1
并将其绑定到一个类或样式以使您的div滚动？嗯，这确实有效！我认为
watch
只会在变量更改时触发，而不是在所有其他回调之后触发。谢谢你知道我如何从观察者那里调用vue实例的方法吗？@SebastianHernandez只需使用
这个
这是一个有效的解决方案！下一个记号是唯一可以确保DOM呈现您在实例数据上指定的更改的东西。在将更改应用于DOM之前，上面接受的解决方案将向下滚动。如果要在之后应用，请使用此解决方案：）。这是更好的解决方案！！正如@CristiJora所说的，在
之后应用更改。$nextTick（function（）{}）
这个解决方案非常有效这是唯一一个真正的解决方案这太棒了！非常感谢。