Javascript vue.js与vuetify:Can'；t在安装中加载谷歌地图

main.js

我正在我的App.vue中加载地图脚本：

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

我已经尝试了vue谷歌地图的其他npm包，但没有让它们发挥作用。 如果我卸下挂载的钩子，只需单击按钮，一切都能正常工作

如果我只使用常规（非异步）mounted（），我会得到以下结果：

[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'firstChild' of null"

但这只是我第一次转到“/”，这就是我尝试异步路由的原因

---

我做错了什么？

首先，建议使用：

this.$el.querySelector（）

而不是

document.querySelector（）

选择器中还有一个错误，您使用了

getElementById

，但是

有一个类

将行更改为：

[Vue warn]: Error in mounted hook: "ReferenceError: google is not defined"

---

首先，建议使用：

this.$el.querySelector（）

而不是

document.querySelector（）

选择器中还有一个错误，您使用了

getElementById

，但是

有一个类

将行更改为：

[Vue warn]: Error in mounted hook: "ReferenceError: google is not defined"

---

感谢大家的反馈，但我最终删除了app.vue文件中created（）钩子中的头部脚本插入，并将google地图的加载“向上”放到index.html文件中

然后，即使没有异步，一切都能正常工作

我在某个地方读到，使用created（）钩子是加载地图的最佳方式，但似乎不是这样（至少在vuetify插件中是这样）

---

可能这与vue没有注册脚本的插入，因此没有更新虚拟dom有关

谢谢大家的反馈，但我最终删除了app.vue文件中created（）钩子中的头部脚本插入，并将google地图的加载“向上”放到index.html文件中

然后，即使没有异步，一切都能正常工作

我在某个地方读到，使用created（）钩子是加载地图的最佳方式，但似乎不是这样（至少在vuetify插件中是这样）

---

可能这与vue没有注册脚本的插入，因此没有更新虚拟dom有关

请创建JSFIDLE来重新创建您的bug好吗？这样，我们可以帮助您。请您创建JSFIDLE来重新创建您的bug好吗？这样，我们可以帮助你。

[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'firstChild' of null"

[Vue warn]: Error in mounted hook: "ReferenceError: google is not defined"

  methods: {
   async renderMap() {      
      const map = await new google.maps.Map(this.$el.querySelector(".map"),
      {
          center: {lat: this.lat, lng: this.lng},
          zoom: 6,
          maxZoom: 15,
          minZoom: 3,
          streetViewControl: false
      });

    }
  },