I am attempting to dynamically adjust the padding of an element through inline styles, depending on the height of its parent. My approach involves:
<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>
The value for paddingTop will be computed property. However, I encountered a problem where I couldn't access the $ref of the parent element (stockRating) in the computed property function, even though it appeared to be present within the $refs object.
paddingTop : function(){
console.log(this.$refs);
console.log(this.$refs.stockRating);
/*computation here*/
}
Upon using console.log, the output revealed:
https://i.sstatic.net/oEn6R.png
If this.$refs includes the stockRating property but this.$refs.stockRating is undefined, how do I resolve this discrepancy and successfully compute the desired padding based on the parent element's height?