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

Я использую 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

Что я делаю неправильно?

Ответ 1

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

Одним из решений является размещение вашего script в обработчике событий загрузки, например

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

Другой синтаксис

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

Ответ 2

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

Ответ 3

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

Ответ 4

Проще всего поставить script ниже документа непосредственно перед вашим закрывающим тегом </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'
    }
});

Ответ 5

У меня была та же проблема, что и у тебя. когда вы загружаете свой app.js, не забудьте добавить defer к тегу script. Пример:

на вашем app.blade.php в качестве примера