Vue.js $ ref non trovato

Question

Sto cercando di impostare dinamicamente il riempimento di un elemento utilizzando stili in linea, in base all'altezza del genitore. Per questo sto 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>

paddingTopsarà una proprietà calcolata. Tuttavia, prima di calcolarlo, devo effettivamente accedere a $ ref dell'elemento genitore ( stockRating). Ma non si trova nella proprietà calcolata, anche se l'oggetto $ refs sembra contenerlo.

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

L' console.logoutput è:

Perché this.$refs.stockRatingnon è definito se this.$refsha la stockRatingproprietà e vedo che contiene anche gli elementi corretti? Come risolvo questo problema?

Answer 1

Devi dire a vue che DOM è pronto e il componente è stato montato.

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

Bene, il tuo $ refs.stockRating è definito ED esiste ma non esisterà finché il componente non sarà montato come spiegato qui .
Non ho provato, ma immagino che se si tenta di console.logtua $refs.stockRatingall'interno del montato () {} proprietà del componente non dovrebbe essere vuoto