Vue.js $ ref introuvable

Question

J'essaie de définir dynamiquement le rembourrage d'un élément à l'aide de styles en ligne, en fonction de la hauteur du parent. Pour cela, j'utilise:

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

paddingTopsera une propriété calculée. Cependant, avant de le calculer, je dois accéder au $ ref de l'élément parent ( stockRating). Mais, il n'est pas trouvé dans la propriété calculée, même si l'objet $ refs semble le contenir.

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

La console.logsortie est:

Pourquoi est this.$refs.stockRatingindéfini si this.$refsa la stockRatingpropriété, et je vois qu'elle contient également les bons éléments? Comment résoudre ça?

Answer 1

Vous devez dire à vue que DOM est prêt et que le composant a été monté.

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

Eh bien, votre $ refs.stockRating est défini ET existe mais il n'existera pas tant que le composant ne sera pas monté comme expliqué ici .
Je n'y suis pas allé , mais je suppose que si vous essayez de console.logvotre $refs.stockRatingintérieur de la propriété d'un composant monté () {} il ne doit pas être vide