[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

— допатраман
джерело

1

Робити це в нижньому колонтитулі чи в заголовку?

— Кріс Бейкер

6

перенесіть свій сценарій у вікно, готовий до обробки вікон

— Арун П Джонні,

2

готовим обробником було питання. здається нерозумним, що Vue не включає це ... @ArunPJohny - якщо ви надсилаєте відповідь з фрагментом невідомо, позначте її як правильну.

— допатраман

317

Я думаю, що проблема полягає в тому, що ваш сценарій виконується до завантаження цільового елемента dom у dom ... одна з причин може бути в тому, що ви розмістили свій скрипт у голові сторінки або в тезі сценарію, який розміщується перед елементом div #main. Отже, коли сценарій виконується, він не зможе знайти цільовий елемент, таким чином, помилка.

Одне рішення - розмістити свій скрипт у обробці подій завантаження, як

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

Ще один синтаксис

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

— Арун П Джонні
джерело

4

ей спасибі, вибачте за коментар тут, чому Vue js потрібно завантажити його, в документі немає розповіді, дякую

— Фредді Сидаурук

9

Також слід зазначити, що addEventListenerметод "технічно" є більш досяжним підходом, оскільки він не перекриває глобальну window.onloadвластивість.

— joshwhatk

Включення сценарію пакету Webpack в цей <head></head>розділ викликало помилку. Очікування завантаження вікна працює.

— Амін NAIRI

1

Немає попередження в консолі, що оператори сценарію, що містять посилання на елементи DOM, не оцінюються перед завантаженням DOM? Як це може бути важким попередженням?

— Том Расселл

70

Я вирішив проблему, додавши атрибут 'defer' до елемента 'script'.

— Су Чуань
джерело

Чи є якісь побічні ефекти при використанні відкладення?

— Мохаммед Алі Акбарі

1

Докладніше про те, як deferпрацює атрибут тегу сценарію, ви можете прочитати тут . Він затримуватиме виконання JS-коду до того моменту, коли DOM розбереться, але до початку onloadподії вікна .

— JrBaconCheez

51

Я отримую ту ж помилку. рішення - поставити свій скрипт-код до кінця тексту, а не в розділі голови.

— li bing zhao
джерело

до кінця тіла, але не в голові? що це означає саме?

— примхливий

6

— li bing zhao

3

поставте свій код vue.js перед </body>, браузери спочатку завантажать вміст тіла, потім завантажать код vue.js, він буде працювати.

— li bing zhao

1

Увійшов у цю проблему під час використання Laravel та супровідної суміші laravel. Переміщення завантаження js до того, як тіло його вирішило.

— джон

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'
    }
});

— Тадас Стасюліоніс
джерело

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, який ви написали, в будь-який інший файл JavaScript або в html-файл.

Використовуйте функцію window.onload у файлі JavaScript.

— Ніят Мурсалі
джерело

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>

— Нішарг Шах
джерело