Estou tentando definir dinamicamente o preenchimento de um elemento usando estilos embutidos, com base na altura do pai. Para isso estou usando:
<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>
paddingTopserá uma propriedade computada. No entanto, antes de computá-lo, tenho que acessar o $ ref do elemento pai ( stockRating). Mas, ele não é encontrado na propriedade computada, embora o objeto $ refs pareça contê-lo.
paddingTop : function(){
console.log(this.$refs); console.log(this.$refs.stockRating);
/*computation here*/
}
O console.logresultado é:

Por que está this.$refs.stockRatingindefinido se this.$refstem a stockRatingpropriedade e vejo que também contém os elementos corretos? Como faço para resolver isso?