ไม่พบ Vue.js $ ref

sveti petar 2020-08-20 04:23.

ฉันพยายามตั้งค่าช่องว่างภายในขององค์ประกอบแบบไดนามิกโดยใช้สไตล์อินไลน์ตามความสูงของพาเรนต์ สำหรับสิ่งนี้ฉันใช้:

<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คุณสมบัติและฉันเห็นว่ามีองค์ประกอบที่ถูกต้องด้วย ฉันจะแก้ไขปัญหานี้ได้อย่างไร

javascript vue.js

2 answers

lightmyfire 2020-08-20 04:38.

คุณต้องบอก 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>

Axel Moriceau 2020-08-20 04:32.

ดี $ refs.stockRating ของคุณจะถูกกำหนดและมีอยู่ แต่ก็จะไม่ได้มีอยู่จนกว่าส่วนประกอบที่ติดตั้งตามที่อธิบายไว้ที่นี่
ผมไม่ได้ลอง แต่ผมคิดว่าถ้าคุณพยายามที่จะconsole.logของคุณ$refs.stockRatingภายในติด () {} คุณสมบัติองค์ประกอบมันไม่ควรจะเป็นที่ว่างเปล่า

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: ทุกสิ่งที่เธอพูดเกี่ยวกับความรักและกรอบเวลา 5 ปีของเธอเพื่อค้นหา 'หนึ่ง'

Jana Duggar เปิดใจเกี่ยวกับการค้นหาความรักของเธอ นี่คือทุกสิ่งที่เธอพูดเกี่ยวกับหัวข้อและกรอบเวลา 5 ปีสำหรับการแต่งงาน

2023-06-12.

แซม ฮิวแฮนรู้ดีว่าเขาจะได้อะไรจากฉาก 'Outlander' — 'ฉันรู้สึกเหมือนตัวเองเป็นเจมี่เมื่อใส่มันลงไป'

เมื่อเร็ว ๆ นี้ แซม ฮิวแฮน นักแสดงจากเรื่อง 'Outlander' ได้เปิดเผยสิ่งที่เขาจะทำจากกองถ่ายเพื่อระลึกถึงเจมี เฟรเซอร์ บทบาทที่ทำให้เขากลายเป็นดารา

2023-06-12.

เพลงของบีทเทิลยุคแรกซึ่งเป็นหนึ่งใน 'การแสดงที่น่าตื่นเต้นที่สุด' ของวง อ้างอิงจากวงในของ Fab Four

'She Loves You' เขียนขึ้นในหนึ่งชั่วโมง บันทึกเสียงในหนึ่งวัน และเป็นเพลงของ The Beatles ที่มีการแสดงที่ดีที่สุดเพลงหนึ่งในอาชีพของพวกเขา

2023-06-11.

Dolly Parton ช่วยคุณยายที่ 'ไม่ถูกต้อง' ของเธอ เมื่อไม่มีหลานคนอื่นๆ อยากทำ—เธอก็จะแกล้งเธอด้วย

Dolly Parton และคุณย่า Bessie มีความสัมพันธ์พิเศษ คุณยายพาร์ตันป่วยหนัก แต่นั่นไม่ได้ทำให้ดอลลี่หยุดแกล้งเธอ

2023-06-11.

ต้นกำเนิดของศาสนาอิสลาม: ประวัติศาสตร์ทางศาสนา

ต้นกำเนิดของศาสนาอิสลามย้อนกลับไปได้ถึงต้นศตวรรษที่ 7 บนคาบสมุทรอาหรับ ศาสนาอิสลามเริ่มต้นขึ้นในเมืองเมกกะ ที่ซึ่งชายคนหนึ่งชื่อมูฮัมหมัด พ่อค้าผู้ประสบความสำเร็จจากชนเผ่าที่ทรงอำนาจ ได้รับการเปิดเผยจากพระเจ้า

2025-12-03.

ไม้ชนิดใดที่แข็งที่สุดในโลก?

คุณอาจคิดว่าไม้โอ๊คหรือฮิคคอรีเป็นไม้ที่แข็ง แต่เมื่อต้องพูดถึงไม้ที่แข็งที่สุดในโลกแล้ว พวกมันกลับไม่ใกล้เคียงเลย

2025-10-29.

10 สิ่งมีชีวิตใต้ทะเลที่น่ากลัวที่สุดที่แฝงตัวอยู่ในส่วนลึกของมหาสมุทร

มหาสมุทรเต็มไปด้วยความงาม แต่ก็ซ่อนสิ่งมีชีวิตใต้ท้องทะเลที่น่ากลัวที่สุดบางชนิดไว้เช่นกัน สัตว์เหล่านี้หลายชนิดซ่อนตัวอยู่ใต้ผิวน้ำอันมืดมิด ในโลกใต้ทะเลลึกอันแสนกดดันและมืดมิด

2025-10-29.

10 สุดยอดการร่ายมนตร์ดาบใน Minecraft

หากคุณกำลังต่อสู้กับศัตรูหรือกำลังเตรียมตัวสำหรับโหมด PvP การรู้ถึงการเสริมพลังดาบที่ดีที่สุดใน Minecraft จะช่วยให้คุณได้เปรียบอย่างมาก การเสริมพลังดาบจะช่วยให้คุณสร้างความเสียหายได้มากขึ้น เพิ่มจำนวนม็อบที่ดรอป และเพิ่มความทนทานของดาบ

2025-10-29.

ที่ 9,800 เหรียญสหรัฐ คุณจะ 'แพ็ค 'Em In' ใน Toyota RAV4 7 ที่นั่งปี 2008 นี้หรือไม่?

RAV4 นี้อ้างว่าอยู่ในสภาพที่ดีเยี่ยมและมีไว้สำหรับการเล่นเก้าอี้ดนตรี

2024-07-03 19:04.

การแสดง Black Panther ของ Marvel จะเป็นการแสดงแอนิเมชั่นที่สำคัญที่สุด

Eyes of Wakanda เชื่อมโยงโดยตรงกับ MCU พร้อมอัปเดตเกี่ยวกับ X-Men '97, What If..., Daredevil และอีกมากมาย

2024-07-03 19:03.

แอนนา วินทัวร์ ก้าวลงจากตำแหน่งบรรณาธิการบริหารของ Vogue หลังจากดำรงตำแหน่งมา 37 ปี และเธอกำลังรับสมัครพนักงาน!

บรรณาธิการบริหารคนเก่าแก่ที่เข้าร่วม American Vogue ในปี 1988 ได้ประกาศข่าวดังกล่าวในการประชุมพนักงานเมื่อเช้าวันพฤหัสบดีที่ 26 มิถุนายน

2025-06-27.

สมเด็จพระสันตปาปาฟรานซิสสิ้นพระชนม์ด้วยพระชนมายุ 88 พรรษา หลังวิกฤตด้านสุขภาพ

สมเด็จพระสันตะปาปาฟรานซิส ประมุขแห่งคริสตจักรคาทอลิกและผู้นำชาวคาทอลิกทั่วโลกราว 1.3 พันล้านคน สิ้นพระชนม์แล้ว สิริพระชนมายุ 88 พรรษา

2025-04-21.

ประวัติการออกเดทของ Ava Gardner: ย้อนมองการแต่งงานและความโรแมนติกของไอคอนแห่งฮอลลีวูด

Ava Gardner แต่งงานกับ Mickey Rooney และ Frank Sintra และเธอยังคบหาดูใจกับดาราฮอลลีวูดอีกหลายคน ต่อไปนี้คือประวัติการออกเดทของ Ava Gardner

2024-06-23.

ภรรยาของจอห์น คลีส คือใคร? ข้อมูลทั้งหมดเกี่ยวกับเจนนิเฟอร์ เวด

จอห์น คลีส แต่งงานกับเจนนิเฟอร์ เวด ภรรยาของเขาในปี 2012 นี่คือทุกสิ่งที่คุณต้องรู้เกี่ยวกับเจนนิเฟอร์ เวด ภรรยาของจอห์น คลีส

2024-06-16.

สรรพนามน่ากลัวมาก

มันทำให้ฉันประหลาดใจ ทันใดนั้นมันก็เกิดขึ้นบ่อยๆ มันอยู่กลางทางอีกครั้ง <ไม่ ไม่ใช่คนในมหาสมุทรแปซิฟิก คุณเป็นสีน้ำตาลแดง คนที่งานคาร์นิวัล> ทุกพาดหัวข่าวดัง…..

3 วิธีที่พิสูจน์แล้วในการพัฒนาทักษะการเขียนของคุณ

ประโยชน์ของการเขียนและกลยุทธ์ที่จะช่วยให้คุณทำได้

ในปี 2022 ด้วยการเปิดตัว GPT-3 ทักษะการเขียนดูเหมือนจะมีความสำคัญน้อยลง ด้วย AI คนที่เขียนไม่ดีก็สามารถสร้างพนักงานที่มีคุณภาพได้เช่นกัน

การพังทลายอย่างช้าๆ: เปิดเผยวิธีที่ผู้คนสูญเสียไปในอาชีพของพวกเขา

ในโลกที่เปลี่ยนแปลงอย่างรวดเร็วและการแข่งขันในปัจจุบัน อาชีพของคนๆ หนึ่งมีบทบาทสำคัญในการเติบโตส่วนบุคคล ความมั่นคงทางการเงิน และความพึงพอใจในชีวิตโดยรวม อย่างไรก็ตาม ผู้คนจำนวนมากพบว่าตัวเองติดอยู่ในวงจรของความเมื่อยล้าและความไม่พอใจอย่างไม่หยุดยั้ง ค่อยๆ สูญเสียชีวิตการทำงานไป

อะไรทำให้พอดคาสต์มีอิทธิพล?

เมื่อสัปดาห์ที่แล้วฉันสังเกตเห็นข่าวประชาสัมพันธ์ที่เผยแพร่ผ่าน PressGazette (เว็บไซต์ข่าวของสื่ออังกฤษ) บทความประกาศว่า Acast ซึ่งเป็นบริษัทโฮสติ้งและโฆษณาพอดคาสต์ของ Scandi จะเป็นผู้นำกลุ่มผู้เผยแพร่ "อาจมีอิทธิพลมากที่สุด" ในพอดคาสต์