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.$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は定義されており、存在しますが、ここで説明するようにコンポーネントがマウントされるまで存在しません。
私はそれを試しませんでしたが、mounted（）{}コンポーネントプロパティの内部を試した場合、それは空であってはならないとconsole.log思います$refs.stockRating