通过服务器站点搜索设置 Vuetify 自动完成的初始值

Question

我正在使用一个v-autocomplete组件来搜索 google api 上的位置。因此，items在设置搜索输入后，数组就会被填充。现在，我尝试设置一个在用户输入建议火车站之前要搜索的默认值。

例如，搜索已针对伦敦城市打开，现在我不想将搜索输入设置为伦敦火车站，以便用户看到该搜索的结果。但是，当我将搜索输入设置为默认值时，它每次都会重置为空。

这是我的模板：

    <v-autocomplete
      ref="trainStationSearch"
      v-model="select"
      :items="places"
      :search-input.sync="searchTerm"
      no-filter
      return-object
    >
      <template #item="data">
        <v-list-item-content>
          <v-list-item-title>{{ data.item.title }}</v-list-item-title>
          <v-list-item-subtitle>{{ data.item.subtitle }}</v-list-item-subtitle>
        </v-list-item-content>
      </template>
    </v-autocomplete>

这里的逻辑是：

• 我在 上有一个观察程序，它会使用 Lodash 的函数searchTerm触发去抖搜索debounce
• searchTerm我尝试在钩子中设置mounted道具的值prefill
  • 在超时的情况下执行此操作会触发观察器并显示组件输入上searchTerm的值。不久后重置为prefillv-autocompletesearchTermnull
  • 没有超时的情况下执行此操作会导致立即searchTerm设置null

  @Prop() readonly prefill?: string

  private places: any = []
  private searchTerm: string | null = ''
  private select: any = null

  private searchGoogle = _.debounce(
    async (val: string, context: Vue): Promise<void> => {
      if (val) {
        // doing the request to my API, which returns the google results
        const data = await apiManager.searchPlaces(val)
        // set the items array to the google results
        this.$set(context, 'places', data.predictions)
      }
    },
    1000
  )

  @Watch('searchTerm')
  private searchPlaces(val: string): void {
    if (val?.trim().length > 0) {
      // trigger debounced request
      this.searchGoogle(val, this)
    } else {
      // empty places array
      this.places.splice(0, this.places.length)
    }
  }

  @Watch('select')
  private handleSelection(): void {
    if (!this.select) {
      return
    }

    // handle selection
  }

  private mounted() {
    if (this.prefill) {
      setTimeout(() => {
        this.searchTerm = this.prefill!
      }, 1000)
    }
  }

Answer 1

我已经去官方 vuetify discord 寻求答案，并发现用我给定的条件重置搜索输入只是预期的行为。考虑到这一点，我试图找出以编程方式设置搜索输入和手动在文本字段中键入以改变搜索输入之间的区别。这是文本字段的焦点。

所以我的解决方法是focus()在设置之前调用自动完成元素searchTerm