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中加载map，它没有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/

无法在Vue组件中显示leaflet.js映射

2 个答案: