[Vue warn]: не удается найти элемент

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
Делать это в нижнем колонтитуле или заголовке?
Крис Бейкер
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>раздел - вот что вызвало у меня ошибку. Ожидание загрузки окна работает.
Амин НАИРИ
1
Нет предупреждения в консоли, что операторы сценария, содержащие ссылки на элементы DOM, оцениваются до загрузки DOM? Как это может быть трудным предупреждением для реализации?
Том Рассел
70

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

Су Чуан
источник
Есть ли побочный эффект от использования отложений?
Мохаммед Али Акбари
1
Вы можете узнать больше о том, как deferработает атрибут тега script здесь . Это задержит выполнение кода JS до тех пор, пока DOM не проанализирует, но до того, как будет запущено onloadсобытие окна .
JrBaconCheez
51

Я получаю ту же ошибку. решение состоит в том, чтобы поместить код скрипта перед концом тела, а не в раздел заголовка.

Ли Бин Чжао
источник
до конца тела, но не в голове? Что именно это значит?
daslicious
6
<script src = "index.js"> </ script> </ body>
Ли
3
поместите ваш код vue.js перед </ body>, браузеры сначала загрузят содержимое тела, затем загрузите код vue.js, он будет работать.
Ли Бин Чжао
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

Вы можете решить это двумя способами.

  1. Убедитесь, что вы поместили 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-файл.

  1. Используйте функцию 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>
Нишарг Шах
источник