Vue 组件仅在我在浏览器上打开控制台模式时加载

Question

我在 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> 

但是 map 仅在我在我的 chrome 浏览器上按 f12 或当我在打开控制台的情况下加载页面时才加载。

只有当我在 mu vue 应用程序中加载 map 时才会发生这种情况。 在组件中，如果我使用纯 javascript。 相反，如果我将 map 放在我的主 vue 应用程序之外，它会完美加载。

console.log("redy;")

而是始终记录

我没有使用节点，只是一个 SPA。

怎么可能？ 有什么建议可以解决这个问题吗？

Answer 1

问题很简单（假设我的怀疑是正确的）

当您执行mounted的生命周期钩子时，期望组件已挂载，但不能保证子组件也已全部挂载。

不过有一个简单的方法可以解决这个问题，那就是使用$nextTick function。

例子：

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"
          }
        }
      });
    }
  }
});

参考：

• https://v2.vuejs.org/v2/api/#mounted
• https://v2.vuejs.org/v2/api/#vm-nextTick