Vue загрузка компонента только при открытии консольного режима в браузере - PullRequest
Новая
       43

Vue загрузка компонента только при открытии консольного режима в браузере

0 голосов
/ 29 апреля 2020

Я создал этот компонент в vue js: 

$(document).ready(function () {

    Vue.component('mappa', {
      mounted() { 
        console.log("redy;");
       this.initMap();
      },

      template: `
        <div class="map-wrapper">
          <div id="map" style="width: 800px; height: 600px"></div>
        </div>
      `,
       methods: {
            initMap() {
                $('#map').vectorMap({
                  map: 'world_mill',
                  backgroundColor: "transparent",
                  zoomOnScroll: false,
                  zoomButtons: false,
                  regionStyle: {
                    initial: {
                      fill: '#128da7'
                    }
                  }
                });
            },


              }
    })

}

, и я вызываю шаблон в html 

<mappa></mappa>

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

Это происходит только в том случае, если я загружаю карту в приложение mu vue. в компоненте, но также, если я использую чистый javascript. Вместо этого он отлично загружается, если я помещаю карту вне моего основного vue приложения.

console.log ("redy;")

вместо этого всегда ведется лог

Я не использую узел, просто SPA.

Как это возможно? Любое предложение, чтобы это исправить?

1 Ответ

0 голосов
/ 29 апреля 2020

Проблема довольно проста (при условии, что мое подозрение верно)

Когда вы выполняете ловушку жизненного цикла mounted, ожидается, что компонент смонтирован, но это не так. Не гарантируйте, что все дети тоже смонтированы.

Хотя есть простой способ обойти это, и использовать функцию $nextTick.

пример: 

Vue.component("mappa", {
  mounted() {
    console.log("redy;");
    this.$nextTick(this.initMap);
  },
  template: `
    <div class="map-wrapper">
      <div id="map" style="width: 800px; height: 600px"></div>
    </div>
  `,
  methods: {
    initMap() {
      $("#map").vectorMap({
        map: "world_mill",
        backgroundColor: "transparent",
        zoomOnScroll: false,
        zoomButtons: false,
        regionStyle: {
          initial: {
            fill: "#128da7"
          }
        }
      });
    }
  }
});

ссылки:

...