Question

我制作了一个带有输入的组件，该组件会加载Google自动填充（InputPlace.vue），并且在两个视图中使用它：主页和搜索。

第一次加载网络时，它可以正常工作，我使用“主页”视图中的组件选择位置并重定向到“搜索”视图。之后，我现在尝试从搜索视图中再次使用它，但是它不显示位置。因此，我需要按F5使其重新工作。

在那之后，如果我返回主视图并尝试再次使用该组件，它将不起作用。和以前一样，我需要按F5键。

这是我的组件（InputPlace.vue）：

<script async refer src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&sensor=false&language=es&region=PE"></script>

这就是我在关闭主体（已经尝试将其添加到头部）之前将库加载到index.html中的方法

import pandas as pd

df=pd.read_csv('example data snippet.csv')
df['protocol'],df['domain'],df['path'],df['query'],df['fragment'] = zip(*df['url'].map(urlparse.urlsplit))

Answer 1

最有可能发生这种情况，因为当用户导航到/search路由时页面没有被重新加载。因此，onload事件不会触发，并且Autocomplete控件未初始化：

google.maps.event.addDomListener(window, 'load', () => {  //<- not triggered
    //..
})

我想说，利用窗口load事件在这里是多余的，因为Autocomplete控件可以在mounted() method中初始化：

<template>
  <label class="form-label-place" for="city">
    <input class="form-control" type="text" id="inputPlace" name="city" placeholder="Search..">
  </label>
</template>
<script>
export default {
  /* global google */

  name: "input-place",
  mounted() {
    const options = {
      types: ["(cities)"]
    };
    const places = new google.maps.places.Autocomplete(
      document.getElementById("inputPlace"),
      options
    );
    google.maps.event.addListener(places, "place_changed", () => {
      //...
    });
  }
};
</script>

The following demo演示了如何在Vue（使用Place Autocomplete component）应用程序中加载Google Maps API和初始化vue-router

Google自动完成组件需要刷新才能正确加载Vuejs

1 个答案: