找不到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。但是，在computed属性中找不到它，即使$refs对象看起来包含它。

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

console.log输出为:

如果this.$refs具有stockrating属性，并且我看到它也包含正确的元素，那么为什么this.$refs.stockrating未定义？我该如何解决这个问题？

Answer 1

您的$Refs.StockRating已经定义并存在，但在组件如此处所述装入之前，它不会存在。
我没有尝试，但我猜如果您尝试在mounted（）{}组件属性中console.log您的$Refs.StockRating，它不应该为空

Answer 2

您必须告诉vue DOM已经就绪，组件已经挂载。

null

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>