Невозможно отобразить leaflet.js карту в Вью компонента

Question

Я получаю сообщение об ошибке:

Вот мой код:

var guestContent = Vue.extend({ 
     template: ` 
    <div> 
    test 
    </div> 
      `, 
     data: function() 
      { 
       return { 
       map: false 
       } 
      }, 
      ready: function() 
      { 
      this.map = L.map('map').setView([51.505, -0.09], 13); 
      }, 
      methods: 
      { 

      } 

     } 
     ); 

var userContent = Vue.extend({ 
     template: ` 
       <p>SOME USER CONTENT TEST</p> 
      ` 
     }); 

var adminContent = Vue.extend({ 
     template: ` 
     <p>ADMIN CONTENT TEST</p> 

     <div id="map" style="width: 600px; height: 400px"></div> 

      ` 
     }); 

Я получаю следующее сообщение об ошибке: Map container not found.

Answer 1

DOM не готов, когда вы пытаетесь создать карту. Оберните его этим. $ NextTick().

ready: function() { 
    this.$nextTick(function() { 
    this.map = L.map('map').setView([51.505, -0.09], 13); 
    } 
}, 

Answer 2

Вы создали 3 различных компонента: guestContent, userContent, adminContent. Но вы загружаете карту только в guestContent, у которого нет тега с id = "map". Вам нужно добавить контейнер карты в шаблон.

var guestContent = Vue.extend({ 
     template: ` 
    <div id="map" style="width: 600px; height: 400px"></div> 
      `, 
     data: function() 
      { 
       return { 
       map: false 
       } 
      }, 
      ready: function() 
      { 
      this.map = L.map('map').setView([51.505, -0.09], 13); 
      }, 
      methods: 
      { 

      } 

     } 
     ); 

Vue.component('guest-content', guestContent) 
new Vue({ 
    el: '#app' 
}) 

Проверить этот пример http://jsfiddle.net/3dqeuoqL/