[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

— Ли

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

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

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

— Нишарг Шах
источник