ไม่พบ 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ภายในติด () {} คุณสมบัติองค์ประกอบมันไม่ควรจะเป็นที่ว่างเปล่า