Không tìm thấy Vue.js $ ref

Question

Tôi đang cố gắng đặt động phần đệm của một phần tử bằng cách sử dụng kiểu nội tuyến, dựa trên chiều cao của phần tử gốc. Đối với điều này, tôi đang sử dụng:

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

paddingTopsẽ là một thuộc tính được tính toán. Tuy nhiên, trước khi tính toán, tôi phải thực sự truy cập vào $ ref của phần tử cha ( stockRating). Tuy nhiên, nó không được tìm thấy trong thuộc tính tính toán, mặc dù đối tượng $ refs có vẻ chứa nó.

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

Đầu console.logra là:

Tại sao this.$refs.stockRatingkhông xác định nếu this.$refscó thuộc stockRatingtính và tôi thấy nó cũng chứa các phần tử chính xác? Làm cách nào để giải quyết vấn đề này?

Answer 1

Bạn phải nói với vue rằng DOM đã sẵn sàng và thành phần đã được gắn kết.

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

Vâng, $ refs.stockRating của bạn đã được xác định VÀ tồn tại nhưng nó sẽ không tồn tại cho đến khi thành phần được gắn kết như được giải thích ở đây .
Tôi không thử nó nhưng tôi đoán rằng nếu bạn cố gắng console.logcủa bạn $refs.stockRatingbên trong gắn kết () {} sở hữu phần nó không nên được sản phẩm nào