[Peringatan Vue]: Tidak dapat menemukan elemen

166

Saya menggunakan Vuejs . Ini markup saya:

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

Ini kode saya:

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

Ketika saya memuat halaman saya mendapatkan peringatan ini:

[Vue warn]: Cannot find element: #main

Apa yang saya lakukan salah?

javascript mvvm vue.js dopatraman
sumber
1
Melakukan ini di footer, atau header?
Chris Baker
6
pindahkan skrip Anda ke penangan siap jendela
Arun P Johny
2
penangan yang siap adalah masalahnya. tampaknya konyol bahwa vue tidak termasuk ini ... @ArunPJohny - jika Anda mengirimkan jawaban dengan tanda sakit snippet sebagai benar.
dopatraman

Jawaban:

317

Saya pikir masalahnya adalah skrip Anda dieksekusi sebelum elemen dom target dimuat di dalam dom ... salah satu alasannya adalah Anda telah menempatkan skrip Anda di bagian atas halaman atau dalam tag skrip yang ditempatkan sebelum elemen div #main. Jadi ketika skrip dieksekusi tidak akan dapat menemukan elemen target sehingga kesalahan.

Salah satu solusinya adalah menempatkan skrip Anda di load event handler like

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

Sintaks lain

window.addEventListener('load', function () {
    //your script
})
Arun P Johny
sumber
4
hei terima kasih, maaf untuk komentar di sini mengapa vue js perlu memuatnya, di doc tidak ada yang tahu, terima kasih
Freddy Sidauruk
9
Juga untuk dicatat, addEventListenermetode ini "secara teknis" merupakan pendekatan yang lebih dapat dipertahankan karena tidak mengesampingkan window.onloadproperti global .
joshwhatk
Termasuk skrip bundel Webpack di <head></head>bagian itulah yang menyebabkan saya kesalahan. Menunggu jendela untuk dimuat berfungsi.
Amin NAIRI
1
Tidak ada peringatan di konsol bahwa pernyataan skrip yang berisi referensi ke elemen DOM sedang dievaluasi sebelum DOM dimuat? Bagaimana ini bisa menjadi peringatan yang sulit untuk diterapkan?
Tom Russell
70

Saya telah memecahkan masalah dengan menambahkan atribut 'tunda' ke elemen 'skrip'.

Su Chuan
sumber
Apakah ada efek samping dengan menggunakan penundaan?
Mohammad Ali Akbari
1
Anda dapat membaca lebih lanjut tentang cara deferkerja atribut tag skrip di sini . Ini akan menunda menjalankan kode JS sampai setelah DOM telah diuraikan, tetapi sebelumonload acara jendela dipecat.
JrBaconCheez
51

Saya mendapatkan kesalahan yang sama. solusinya adalah dengan meletakkan kode skrip Anda sebelum akhir tubuh, bukan di bagian kepala.

li bing zhao
sumber
sebelum ujung tubuh tetapi tidak di kepala? apa artinya itu sebenarnya?
daslicious
6
<script src = "index.js"> </script> </body>
li bing zhao
3
letakkan kode vue.js Anda di depan </body>, browser akan memuat konten tubuh terlebih dahulu, lalu muat kode vue.js, itu akan berfungsi.
li bing zhao
1
Mengalami masalah ini saat menggunakan Laravel dan laravel-mix yang menyertainya. Memindahkan pemuatan js ke setelah tubuh menyelesaikannya.
john
24

Yang sederhana adalah dengan meletakkan script di bawah dokumen, tepat sebelum </body>tag penutup Anda :

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

file app.js: 

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

Anda dapat menyelesaikannya dengan dua cara.

  1. Pastikan Anda memasukkan CDN ke bagian akhir halaman html dan letakkan skrip Anda sendiri setelah itu. Contoh:
    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="js/app.js"></script>

di mana Anda harus meletakkan kode javascript yang sama yang Anda tulis di file JavaScript lain atau file html.

  1. Gunakan fungsi window.onload dalam file JavaScript Anda.
Nijat Mursali
sumber
0

Saya pikir terkadang kesalahan bodoh bisa memberi kita kesalahan ini.

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

Untuk

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