Vue.js $ ref no encontrado

Question

Estoy tratando de establecer dinámicamente el relleno de un elemento usando estilos en línea, según la altura del padre. Para esto estoy 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á una propiedad calculada. Sin embargo, antes de calcularlo, tengo que acceder al $ ref del elemento principal ( stockRating). Pero, no se encuentra en la propiedad calculada, aunque el objeto $ refs parece contenerlo.

paddingTop : function(){
    console.log(this.$refs); console.log(this.$refs.stockRating);
    /*computation here*/
}

La console.logsalida es:

¿Por qué this.$refs.stockRatingno está definido si this.$refstiene la stockRatingpropiedad y veo que también contiene los elementos correctos? ¿Cómo resuelvo esto?

Answer 1

Tienes que decirle a vue que DOM está listo y el componente fue montado.

new Vue({
  el: "#app",
  computed: {
    itemRef() {
      console.log(this.$refs.item) return this.ready ? this.$refs.item : false
    }
  },
  data: () => {
    return {
      ready: false
    };
  },
  mounted() {
    this.ready = true;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div ref="item" class="item">
    {{itemRef}}
  </div>
</div>

Answer 2

Bueno, su $ refs.stockRating está definido Y existe, pero no existirá hasta que el componente se monte como se explica aquí .
Yo no lo probamos, pero supongo que si se intenta console.logel $refs.stockRatinginterior de la monta () {} propiedad de componente que no debe estar vacía