Vue.js $ ref nicht gefunden

Question

Ich versuche, das Auffüllen eines Elements mithilfe von Inline-Stilen basierend auf der Höhe des übergeordneten Elements dynamisch festzulegen. Dafür benutze ich:

<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>

paddingTopwird eine berechnete Eigenschaft sein. Bevor ich es jedoch berechne, muss ich tatsächlich auf die $ ref des übergeordneten Elements ( stockRating) zugreifen . Es wird jedoch nicht in der berechneten Eigenschaft gefunden, obwohl das $ refs-Objekt es zu enthalten scheint.

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

Die console.logAusgabe ist:

Warum ist this.$refs.stockRatingundefiniert, wenn this.$refsdie stockRatingEigenschaft vorhanden ist und ich sehe, dass sie auch die richtigen Elemente enthält? Wie löse ich das?

Answer 1

Sie müssen vue mitteilen, dass DOM bereit ist und die Komponente bereitgestellt wurde.

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

Nun, Ihr $ refs.stockRating ist definiert UND existiert, aber es wird nicht existieren, bis die Komponente wie hier beschrieben gemountet ist .
Ich habe es nicht ausprobiert , aber ich denke , dass , wenn Sie versuchen , console.logIhr $refs.stockRatinginnerhalb der montierte () {} Komponente Eigenschaft sollte nicht leer sein