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

Question

[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

что я делаю не так?

626 4

javascript vue.js mvvm

4 ответов:

Comments

Ничего не найдено.

Arun P Johny · Accepted Answer · 2015-04-07 08:45:28

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

одним из решений является размещение вашего скрипта в обработчике событий загрузки, например
window.onload = function () {
    var main = new Vue({
        el: '#main',
        data: {
            currentActivity: 'home'
        }
    });
}
другой синтаксис
window.addEventListener('load', function () {
    //your script
})

Su Chuan · Accepted Answer · 2017-08-20 13:06:03

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

li bing zhao · Accepted Answer · 2016-11-14 18:44:31

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

Tadas Stasiulionis · Accepted Answer · 2017-10-01 19:42:25

самое простое-поставить скрипт под документом, как раз перед вашим закрытием </body> теги:
<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>
приложение.js file:
var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});