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계산 된 속성이됩니다. 그러나 계산하기 전에 실제로 부모 요소 ( stockRating) 의 $ ref에 액세스해야합니다 . 그러나 $ refs 개체에 포함 된 것처럼 보이지만 계산 된 속성에서 찾을 수 없습니다.

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

console.log출력은 다음과 같습니다

속성 이있는 this.$refs.stockRating경우 정의되지 않은 이유는 무엇이며 올바른 요소도 포함되어 있습니다. 이 문제를 어떻게 해결합니까?this.$refsstockRating

Answer 1

DOM이 준비되었고 구성 요소가 마운트되었음을 ​​vue에 알려야합니다.

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이 빈 안) {} 구성 요소 속성을 내부 (장착