javascript - [Vue.js 2][Google Places API] 如何修复此错误 : "Uncaught TypeError: Cannot read property ' getPlacePredictions' of null"?

Question

我希望得到鼓励，因为我已经在这个问题上停留了很长一段时间了。非常感谢您抽出宝贵的时间。

目标:

我想解决一个问题。问题是控制台中出现此错误消息:

结果:

在我使用它的页面上，完成了重定向并将我重定向到我使用它的另一个页面，但我无法再使用该工具。它不再向我提供任何内容，并在控制台中向我显示上面的错误。

但是，如果我刷新页面(硬重新加载)或单击另一个页面，然后单击返回配置文件设置页面，则它可以正常工作。

用户流程

当用户注册时，他/她可以填写表单(在 vue.js 组件上)作为“入门”流程的一部分。在该特定表单上，要求用户添加一个地点(通过 v-autocomplete)。为此，我使用该组件脚本部分下的代码(见下文)。

当用户完成后，他/她会被重定向到他/她的个人资料设置页面(同样是另一个 vue.js 组件)，他/她可以在其中再次通过 v-autocomplete 编辑该位置。为此，我在该组件的脚本部分下使用了下面的代码(见下文)。

注意。因此，应用程序 vue.js 创建了两次 google map 实例。

我的代码:

v-自动完成:

<v-autocomplete
v-model="userPrefs.prefPlace"
:items="searchResults"
:search-input.sync="location"
hide-no-data
hide-selected
:placeholder="userPrefs.prefPlace"
item-text="Description"
item-value="API"
:error-messages="placeErrors"
@blur="$v.userPrefs.prefPlace.$touch()"
required: true
outlined
></v-autocomplete>

metaInfo():

metaInfo() {
  return {
    script: [
      {
        src: `https://maps.googleapis.com/maps/api/js?key=${process.env.VUE_APP_FB_APIKEY}&libraries=places`,
        async: true,
        defer: true,
        callback: () => this.MapsInit() // will declare it in methods
      }
    ]
  };
}

watch :

watch: {
  location(newValue) {
    this.timeOutID = debounce(() => {
      if (newValue) {
        this.service.getPlacePredictions(
          {
            input: this.location,
            types: ["(regions)"],
            componentRestrictions: { country: "be" }
          },
          this.displaySuggestions
        );
      }
    }, this.timeOutID, 500);
  }
}

MapsInit() 和 displaySuggestions() 方法:

methods: {
  MapsInit() {
    this.service = new window.google.maps.places.AutocompleteService();
  },
  displaySuggestions(predictions, status) {
    if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
      this.searchResults = [];
      return;
    }
    this.searchResults = predictions.map(prediction => prediction.description);
  }
};

那么，你知道问题出在哪里吗？如果有遗漏的请告诉我，谢谢!

Answer 1

问题似乎是在 MapsInit() 时 Google Places 脚本尚未加载(通过对 location 的元回调)。观察者被调用，所以 this.service仍然是其初始值( null )。

一种选择是在应用生命周期的早期加载脚本(例如，在 App 组件中，或在 head 的 index.html 标记内)。

另一个选项是有条件地渲染 v-autocomplete基于service这样location仅当 service 时才调用 watcher实际上已设置:

<v-autocomplete v-if="service" :search-input.sync="location">

这假设 <v-autocomplete>是 location 更改的唯一来源.