Vue.js: sự kiện sau khi v-for được thực hiện

Question

Tôi đang cố gắng xây dựng một ứng dụng trò chuyện đơn giản với Vue.js. Vấn đề của tôi là vùng tin nhắn cần phải cuộn xuống dưới cùng khi một tin nhắn mới được viết.

Tôi lặp qua các thư có chỉ thị v-cho. Có sự kiện khi v-for đã cập nhật DOM không?

Tôi đã tạo nó để div khu vực tin nhắn lắng nghe mảng tin nhắn của thành phần. Tôi đã cố gắng để trong cùng một chức năng mà tôi đang thêm thông điệp vào mảng, nó sẽ thiết lập scrollTop của khu vực tin nhắn div thành 99999. Nhưng vấn đề là v-for không được thực hiện cập nhật DOM, vì vậy nó sẽ không di chuyển đến điểm chính xác.

Answer 1

Bạn đã thử sử dụng watch?

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

Chỉnh sửa: Hãy xem giải pháp khác yêu cầu sử dụng chức năng nextTick để đảm bảo DOM được cập nhật.

Answer 2

Tôi gặp sự cố tương tự nhưng tôi đã thực hiện một cách tiếp cận khác bằng cách sử dụng vue.nextTick(). Tôi cần đảm bảo rằng v-for đã hoàn thành hiển thị vì thành phần sẽ không hiển thị lại ngay lập tức, nó sẽ cập nhật vào "đánh dấu" tiếp theo khi hàng đợi trống.

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