Tôi đang cố gắng đặt động phần đệm của một phần tử bằng cách sử dụng kiểu nội tuyến, dựa trên chiều cao của phần tử gốc. Đối với điều này, tôi đang sử dụng:
<div class="stock-rating positive" ref="stockRating">
<div class="stock-rating-start-end" v-bind:style="{ paddingTop: paddingTop }">
<div>{{ rating.value_start }}</div>
<div>to</div>
<div>{{ rating.value_end }}</div>
</div>
</div>
paddingTopsẽ là một thuộc tính được tính toán. Tuy nhiên, trước khi tính toán, tôi phải thực sự truy cập vào $ ref của phần tử cha ( stockRating). Tuy nhiên, nó không được tìm thấy trong thuộc tính tính toán, mặc dù đối tượng $ refs có vẻ chứa nó.
paddingTop : function(){
console.log(this.$refs); console.log(this.$refs.stockRating);
/*computation here*/
}
Đầu console.logra là:

Tại sao this.$refs.stockRatingkhông xác định nếu this.$refscó thuộc stockRatingtính và tôi thấy nó cũng chứa các phần tử chính xác? Làm cách nào để giải quyết vấn đề này?