[Vue warn]: Öğe bulunamıyor

166

Vuejs kullanıyorum . Bu benim işaretlemem:

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

Bu benim kodum:

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

Sayfayı yüklediğimde şu uyarıyı alıyorum:

[Vue warn]: Cannot find element: #main

Neyi yanlış yapıyorum?

javascript mvvm vue.js

— dopatraman
kaynak

1

Bunu altbilgide mi başlıkta mı yapıyorsunuz?

— Chris Baker

6

komut dosyanızı bir pencereye hazır işleyiciye taşıyın

— Arun P Johny

2

sorun hazırdı. Bu vue bunu içermiyor aptal gibi görünüyor ...

— dopatraman

317

Sorunun hedef dom öğesi dom yüklenmeden önce yürütüldüğünü düşünüyorum ... bir nedeni komut dosyasını sayfanın başına veya div öğesinden önce yerleştirilen bir komut dosyası etiketi yerleştirmiş olabilir #main. Komut dosyası yürütüldüğünde, hedef öğeyi ve dolayısıyla hatayı bulamaz.

Bir çözüm, komut dosyanızı aşağıdaki gibi yükleme olayı işleyicisine yerleştirmektir

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

Başka bir sözdizimi

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

— Arun P Johny
kaynak

4

hey teşekkürler, vue js neden yüklenmeli burada yorum için üzgünüm,

— doktorda

9

Ayrıca belirtmek gerekirse, addEventListeneryöntem "teknik olarak" daha sürdürülebilir bir yaklaşımdır çünkü global window.onloadmülkiyeti geçersiz kılmaz .

— joshwhatk

Webpack paket komut dosyasını <head></head>bölüme dahil etmek , bana hataya neden olan şeydi. Yüklenecek pencerenin beklenmesi çalışıyor.

— Amin NAIRI

1

Konsolda DOM öğelerine başvurular içeren komut dosyası ifadelerinin DOM yüklenmeden önce değerlendirildiğine dair bir uyarı yok mu? Bunu uygulamak nasıl zor bir uyarı olabilir?

— Tom Russell

70

Sorunu, 'script' öğesine 'defer' özelliğini ekleyerek çözdüm.

— Su Chuan
kaynak

Ertelemenin herhangi bir yan etkisi var mı?

— Mohammad Ali Akbari

1

Komut dosyası etiketinin deferözelliğinin nasıl çalıştığı hakkında daha fazla bilgiyi buradan edinebilirsiniz . Bu DOM ayrıştırılır sonrasına kadar JS kodu çalıştıran geciktirecek, ama önce pencere onloadolayı harekete geçirilir.

— JrBaconCheez

51

Aynı hatayı alıyorum. çözüm, komut dosyası kodunu baş bölümünde değil, gövdenin sonundan önce koymaktır.

— li bing zhao
kaynak

vücudun sonundan önce ama kafanın içinde değil mi? bu tam olarak ne anlama geliyor?

— 16:10

6

— li bing zhao

3

vue.js kodunuzu </body> önüne koyun, tarayıcılar önce gövde içeriğini yükler, ardından vue.js kodunu yükler, çalışır.

— li bing zhao

1

Laravel ve beraberindeki laravel-mix'i kullanırken bu sorunla karşılaştı. Vücut yüklenmesinden sonra js yüklemesini taşımak.

— john

24

Basit olan şey, komut dosyasını kapanış </body>etiketinizden hemen önce belgenin altına koymaktır :

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

app.js dosyası:

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

— Tadas Stasiulionis
kaynak

0

Bunu iki şekilde çözebilirsiniz.

CDN'yi html sayfasının sonuna yerleştirdiğinizden ve bundan sonra kendi komut dosyanızı yerleştirdiğinizden emin olun. Misal:

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

başka bir JavaScript dosyasına veya html dosyasına yazdığınız aynı javascript kodunu koymanız gerekir.

JavaScript dosyanızda window.onload işlevini kullanın .

— Nijat Mursali
kaynak

0

Bence bazen aptalca hatalar bize bu hatayı verebilir.

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

için

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

— Nisharg Shah
kaynak