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

Я использую Vuejs. Это моя разметка:[Vue warn]: Не удается найти элемент

<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

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

источник

2015-04-07 dopatraman

Делать это в сноске, или заголовок? –

переместите ваш скрипт в обработчик окна –

. кажется глупым, что vue не включает это ... @ArunPJohny - если вы отправляете ответ со сниппетом, то отметьте его как правильно. – dopatraman

141

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

Одно решение поместить скрипт в обработчик событий нагрузки как

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

Другое Синтаксис

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

источник

2015-04-07 05:45:28

эй спасибо, извините за комментарий здесь, почему vue js нужно загрузить, в документе не сказано, спасибо –

Также следует отметить, что метод 'addEventListener' является« технически »более удобным для обслуживания подходом, поскольку он не является переопределяющим глобальное свойство 'window.onload'. – joshwhatk

Включение сценария пакета Webpack в раздел '' - это то, что вызвало ошибку. Ожидается, что окно будет загружено. –

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

источник

2016-11-14 16:44:31

перед концом тела, но не в голове? Что именно это значит? – daslicious

<сценарий SRC = «index.js»> –

положить vue.js код перед, браузеры будут загружать содержимое тела, а затем загрузить код vue.js, он будет работать. –

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

источник

2017-08-20 10:06:03

Это самое чистое решение из всех данных, должно иметь больше upvotes! –

Подробнее о defer здесь: https://www.w3schools.com/Tags/att_script_defer.asp –

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

источник

2017-10-01 16:42:25

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

ответ

Смежные вопросы