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

Question

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

我用v-for指令循环遍历消息.当v-for更新DOM时是否有事件？

我已经使它成为消息区域div侦听组件的消息数组.我试过这样,在我将消息附加到数组的同一个函数中,它会将消息区div的scrollTop设置为99999.但问题是v-for没有更新DOM,所以它不会滚动到正确的观点.

Answer 1

我有一个类似的问题,但我采取了不同的方法使用vue.nextTick().我需要确保v-for已经完成渲染,因为组件不会立即重新渲染,当队列为空时它会在下一个"滴答"时更新.

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

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

https://vuejs.org/v2/api/#Vue-nextTick

https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

Answer 2

你试过使用watch吗？

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

编辑：请参阅其他答案，因为此解决方案需要使用该nextTick函数来确保更新 DOM。