내가 오류를 얻고있다 뷰 구성 요소

Question

에서지도를 leaflet.js 표시 할 수 없습니다 :

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

guestContent, userContent, adminContent의 세 가지 구성 요소를 만들었습니다. 그러나 id = "map"태그가없는 guestContent에서만 맵을로드 할 수 있습니다. 템플릿에지도 컨테이너를 추가해야합니다.

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/