Vuetify 自动完成不显示包含多个搜索词的建议

Question

当我使用 Vuetify <v-autocomplete> 进行搜索时，我的 API、mytext 和 myvalue 会正确更新并显示在建议中，前提是写下类似的词FOO，如果我写一个像 FOO BAR 这样的字符串，那么我在 API 调用方法中用 console.log(response.data) 得到正确的结果，但是我在 [= 的建议中什么也得不到12=].

<template>:

<v-autocomplete
  v-model="select"
  :loading="loading"
  :items="items"
  item-text="mytext"
  item-value="myvalue"
  :search-input.sync="search"
  hide-no-data
  hide-details
  label="My Autocomplete"
>
  <template v-slot:item="data">
    <v-list-item-content>
      <v-list-item-title v-html="data.item.mytext"></v-list-item-title>
      <v-list-item-subtitle
        v-html="data.item.myvalue"
      ></v-list-item-subtitle
    ></v-list-item-content>
  </template>
</v-autocomplete>

<script>:

<script>
export default {
  data() {
    return {
      select: null,
      loading: false,
      items: [],
      search: null
    }
  },
  watch: {
    search(val) {
      console.log('search: ' + val)
      val && val !== this.select && this.query(val)
    }
  },
  methods: {
    async query(v) {
      this.loading = true
      await this.$axios
        .get('/api/foo', {
          params: {
            search: this.search
          }
        })
        .then((response) => {
          console.log(response.data)
          this.items = response.data
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

search 变量似乎链接到 items 变量。

Answer 1

我终于通过将此道具添加到 <v-autocomplete> 来修复它：

:filter="() => true"

Answer 2

您可以将 no-filter 道具应用到您的 v-autocomplete 组件。

<v-autocomplete
    ...
    no-filter
    ...
>
</v-autocomplete>

如该道具的文档中所写：

Do not apply filtering when searching. Useful when data is being filtered server side

https://vuetifyjs.com/en/api/v-autocomplete/#props

Vuetify 自动完成不显示包含多个搜索词的建议

Vuetify autocomplete not showing suggestions with more than one search term

vue.js

autocomplete

vuetify.js