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

时间:2016-01-15 10:18:13

标签: javascript dom vue.js

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

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

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

2 个答案:

答案 0 :(得分:33)

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

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

答案 1 :(得分:3)

您是否尝试过使用watch

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

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