Vue.js $ ref не найден

Question

Я пытаюсь динамически установить отступ элемента, используя встроенные стили, в зависимости от высоты родительского элемента. Для этого я использую:

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

paddingTopбудет вычисляемым свойством. Однако, прежде чем я его вычислю, мне нужно получить доступ к $ ref родительского элемента ( stockRating). Но его нет в вычисляемом свойстве, хотя объект $ refs пытается его содержать.

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

Результат console.log:

Почему не this.$refs.stockRatingопределен , если this.$refsимеет stockRatingсвойство, и я вижу в нем правильные элементы, а? Как мне решить эту проблему?

Answer 1

Вы должны сообщить vue, что модель DOM готова и компонент смонтирован.

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

Итак, ваш $ refs.stockRating определен И существует, но не будет существовать, пока компонент не будет смонтирован, как описано здесь .
Я не пробовал , но я думаю , что если вы попытаетесь console.logвашей $refs.stockRatingвнутренней смонтированный () {} свойство компонента не должно быть пустым