Saya mencoba untuk secara dinamis mengatur padding elemen menggunakan gaya inline, berdasarkan ketinggian induknya. Untuk ini saya menggunakan:
<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>
paddingTopakan menjadi properti yang dihitung. Namun, sebelum saya menghitungnya, saya harus benar-benar mengakses $ ref dari elemen induk ( stockRating). Tapi, itu tidak ditemukan di properti yang dihitung, meskipun objek $ refs terlihat memuatnya.
paddingTop : function(){
console.log(this.$refs); console.log(this.$refs.stockRating);
/*computation here*/
}
The console.logoutput:

Mengapa tidak this.$refs.stockRatingditentukan jika this.$refsmemiliki stockRatingproperti, dan saya melihatnya berisi elemen yang benar juga? Bagaimana cara mengatasi ini?