Trong vue.js 2, đo chiều cao của một thành phần khi các khe được hiển thị

Question

Tôi đang tìm cách đọc chiều cao (clientHeight) của một thành phần sau khi các vị trí của nó được hiển thị (trong DOM) và sau đó đặt kết quả cho một dữ liệu phản ứng để tính toán thêm.

Theo tài liệu của móc updated:

DOM của thành phần sẽ được cập nhật khi móc này được gọi là, vì vậy bạn có thể thực hiện thao tác DOM phụ thuộc vào đây

... Được rồi cho đến lúc đó, nhưng tài liệu cũng nêu rõ:

Tuy nhiên, trong hầu hết các trường hợp, bạn nên tránh thay đổi trạng thái bên trong móc

... Có vẻ như điều này không bị cấm đặt dữ liệu phản hồi trong móc updated.

Kết quả là rất không ổn định, đôi khi tôi nhận được clientHeight sau khi các vị trí được hiển thị và đôi khi trước khi chúng được hiển thị.

Dường như móc 'cập nhật' được gọi vào đúng thời điểm nhưng việc thay đổi dữ liệu phản ứng trong móc này không hoạt động có hệ thống.

kiểm tra: https://jsfiddle.net/4wv9f052/5/

Answer 1

Sử dụng nextTick

Vue.nextTick(() => { 
    this.height = this.$el.clientHeight; 
}); 

https://jsfiddle.net/4wv9f052/9/