VuetifyJS 使用 Google Places API 自动完成的高级插槽

Question

我需要获得VuetifyJS advanced slots 才能使用Google Places API。目前，某些地址仅在单击表单字段中的 "x" 以删除输入文本后才会显示在自动完成下拉列表中。

这是一个演示该问题的 CodePen： https://codepen.io/vgrem/pen/Bvwzza 编辑：我刚刚发现用建议填充下拉菜单是问题所在。这些建议在 console.log 中可见，但在下拉列表中不可见。任何想法如何解决这个问题？

（有些地址可以立即使用，有些则根本无法使用 - 这是非常随机的。 非常欢迎任何有关如何解决此问题的想法。）

JS：

    new Vue({
  el: "#app",
  data: () => ({
    isLoading: false,
    items: [],
    model: null,
    search: null,
  }),

  watch: {
    search(val) {
      if (!val) {
          return;
      }

      this.isLoading = true;

      const service = new google.maps.places.AutocompleteService();
      service.getQueryPredictions({ input: val }, (predictions, status) => {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          return;
        }

        this.items = predictions.map(prediction => {
          return {
            id: prediction.id,
            name: prediction.description,
          };
        });

        this.isLoading = false;
      });
    }
  }
});

HTML：

<div id="app">
  <v-app id="inspire">
    <v-toolbar color="orange accent-1" prominent tabs>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title class="title mr-4">Place</v-toolbar-title>
      <v-autocomplete
        v-model="model"
        :items="items"
        :loading="isLoading"
        :search-input.sync="search"
        chips
        clearable
        hide-details
        hide-selected
        item-text="name"
        item-value="symbol"
        label="Search for a place..."
        solo
      >
        <template slot="no-data">
          <v-list-tile>
            <v-list-tile-title>
              Search for a <strong>Place</strong>
            </v-list-tile-title>
          </v-list-tile>
        </template>
        <template slot="selection" slot-scope="{ item, selected }">
          <v-chip :selected="selected" color="blue-grey" class="white--text">
            <v-icon left>mdi-map-marker</v-icon>
            <span v-text="item.name"></span>
          </v-chip>
        </template>
        <template slot="item" slot-scope="{ item, tile }">
          <v-list-tile-avatar
            color="indigo"
            class="headline font-weight-light white--text"
          >
            {{ item.name.charAt(0) }}
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.name"></v-list-tile-title>
            <v-list-tile-sub-title v-text="item.symbol"></v-list-tile-sub-title>
          </v-list-tile-content>
          <v-list-tile-action> <v-icon>mdi-map-marker</v-icon> </v-list-tile-action>
        </template>
      </v-autocomplete>
      <v-tabs
        slot="extension"
        :hide-slider="!model"
        color="transparent"
        slider-color="blue-grey"
      >
        <v-tab :disabled="!model">Places</v-tab>
      </v-tabs>
    </v-toolbar>
  </v-app>
</div>

（我在 Google Cloud 中启用了相关 API。）

Answer 1

问题是您在一定时间内执行的请求数量。每个字符都会触发对 GoogleApi 的请求。

我认为 error_message 并不完全正确，而我后来尝试它给了我一个结果。

为了解决这个问题，

1. 升级您的 GoogleApi 帐户
2. 去抖动您的输入。所以等到客户半秒钟没有打字，然后向 googleApi 发送请求。您可以使用 lodash 来实现去抖动功能https://lodash.com/docs/#debounce