Почему Vue не инициализирован?

#javascript #vue.js #vuejs2

Вопрос:

У меня есть приложение Rails. Иногда на страницах я размещаю компоненты Vue. Это могут быть простые динамические списки. Но также может существовать более сложная реализация со множеством компонентов, вложенных друг в друга.

Сначала я покажу вам, как все это работает (код).

Часть кода с основного уровня в приложении Rails:

 body
  #app
    = yield

И часть кода из JS:

 if (document.getElementById('app')) {
  new Vue({
    el: '#app',

А теперь о проблеме.

Иногда, когда я открываю браузер, я загружаю страницу без компонентов Vue. Эта проблема одинаково актуальна в macOS Chrome / Safari и iOS Safari. Но если я вручную перезагружу страницу, то все будет в порядке.

В чем может быть проблема? Почему браузер быстро загружает страницу после запуска (возможно, из кэша?) и плохо реагирует на Vue?

Ответ №1:

Выполните код, когда DOM будет готов:

 document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     ...
})