[เตือน Vue]: ไม่พบองค์ประกอบ

166

ฉันใช้Vuejs นี่คือมาร์กอัปของฉัน:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

นี่คือรหัสของฉัน:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;

เมื่อฉันโหลดหน้าฉันได้รับคำเตือนนี้:

[Vue warn]: Cannot find element: #main

ผมทำอะไรผิดหรือเปล่า?

javascript mvvm vue.js

— dopatraman
แหล่งที่มา

1

ทำสิ่งนี้ในส่วนท้ายหรือส่วนหัว?

— Chris Baker

6

ย้ายสคริปต์ของคุณไปยังตัวจัดการพร้อมหน้าต่าง

— Arun P Johny

2

ตัวจัดการที่พร้อมเป็นปัญหา ดูเหมือนว่าโง่ที่ vue ไม่ได้รวม ... @ArunPJohny - ถ้าคุณส่งคำตอบด้วยตัวอย่างที่ไม่ดีให้ทำเครื่องหมายว่าถูกต้อง

— dopatraman

317

ฉันคิดว่าปัญหาคือสคริปต์ของคุณถูกเรียกใช้งานก่อนที่องค์ประกอบ dom เป้าหมายจะโหลดใน dom ... เหตุผลหนึ่งอาจเป็นเพราะคุณวางสคริปต์ไว้ที่ส่วนหัวของหน้าหรือในแท็กสคริปต์ที่วางไว้ก่อนองค์ประกอบ div #main. ดังนั้นเมื่อสคริปต์ถูกเรียกใช้งานจะไม่สามารถค้นหาองค์ประกอบเป้าหมายได้ดังนั้นจึงเกิดข้อผิดพลาด

ทางออกหนึ่งคือการวางสคริปต์ของคุณในตัวจัดการเหตุการณ์การโหลดเช่น

window.onload = function () {
    var main = new Vue({
        el: '#main',
        data: {
            currentActivity: 'home'
        }
    });
}

ไวยากรณ์อื่น

window.addEventListener('load', function () {
    //your script
})

— อรุณ P Johny
แหล่งที่มา

4

เฮ้ขอบคุณขอโทษสำหรับความคิดเห็นที่นี่ทำไม vue js ต้องโหลดใน doc ไม่มีการบอกขอบคุณ

— Freddy Sidauruk

9

นอกจากนี้addEventListenerวิธีการคือ "เทคนิค" ซึ่งเป็นวิธีการบำรุงรักษาที่ดีกว่าเพราะมันไม่ได้แทนที่window.onloadคุณสมบัติทั่วโลก

— joshwhatk

การรวมสคริปต์บันเดิลของ Webpack ใน<head></head>ส่วนนี้เป็นสาเหตุของข้อผิดพลาด กำลังรอให้โหลดหน้าต่างทำงานอยู่

— Amin NAIRI

1

ไม่มีคำเตือนในคอนโซลที่คำสั่งสคริปต์ที่มีการอ้างอิงถึงองค์ประกอบ DOM กำลังได้รับการประเมินก่อนที่จะโหลด DOM? นี่เป็นคำเตือนที่ยากที่จะนำไปใช้อย่างไร

— Tom Russell

70

ฉันแก้ไขปัญหาโดยเพิ่มแอตทริบิวต์ 'เลื่อน' ไปยังองค์ประกอบ 'สคริปต์'

— ซวนชวน
แหล่งที่มา

มีผลข้างเคียงใด ๆ จากการใช้ defer หรือไม่?

— Mohammad Ali Akbari

1

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีการแท็กสคริปต์deferแอตทริบิวต์การทำงานที่นี่ มันจะล่าช้าในการเรียกใช้รหัส JS จนกว่าหลังจาก DOM ได้แยกวิเคราะห์ แต่ก่อนที่จะมีการเรียกใช้onloadเหตุการณ์หน้าต่าง

— JrBaconCheez

51

ฉันได้รับข้อผิดพลาดเดียวกัน ทางออกคือการใส่รหัสสคริปต์ของคุณก่อนที่จะสิ้นสุดของร่างกายไม่ได้อยู่ในส่วนหัว

— หลี่ปิงจ้าว
แหล่งที่มา

ก่อนถึงจุดจบของร่างกาย แต่ไม่ใช่ในหัว? หมายความว่าอะไรกันแน่?

— daslicious

6

— li bing zhao

3

ใส่รหัส vue.js ของคุณไว้ข้างหน้า </body> เบราว์เซอร์จะโหลดเนื้อหาของร่างกายก่อนจากนั้นโหลดรหัส vue.js ซึ่งจะทำงานได้

— li bing zhao

1

พบปัญหานี้ในขณะที่ใช้ Laravel และ laravel-mix ประกอบ การย้ายการโหลด js ไปยังหลังจากที่ร่างกายได้รับการแก้ไข

— john

24

สิ่งที่ง่ายคือการวางสคริปต์ไว้ใต้เอกสารหน้า</body>แท็กปิดของคุณ:

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

ไฟล์ app.js:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});

— Tadas Stasiulionis
แหล่งที่มา

0

คุณสามารถแก้มันได้สองวิธี

ตรวจสอบให้แน่ใจว่าคุณใส่ CDN ลงในส่วนท้ายของหน้า html และวางสคริปต์ของคุณเองหลังจากนั้น ตัวอย่าง:

    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/app.js"></script>

โดยที่คุณต้องใส่รหัสจาวาสคริปต์ที่คุณเขียนไว้ในไฟล์ JavaScript อื่นหรือในไฟล์ html

ใช้ฟังก์ชั่นwindow.onloadในไฟล์ JavaScript ของคุณ

— Nijat Mursali
แหล่งที่มา

0

ฉันคิดว่าบางครั้งความผิดพลาดที่โง่สามารถทำให้เรามีข้อผิดพลาดนี้

<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

ถึง

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

— Nisharg Shah
แหล่งที่มา