Vuetify 自动完成不显示包含多个搜索词的建议
Vuetify autocomplete not showing suggestions with more than one search term
当我使用 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
变量。
我终于通过将此道具添加到 <v-autocomplete>
来修复它:
:filter="() => true"
您可以将 no-filter
道具应用到您的 v-autocomplete
组件。
<v-autocomplete
...
no-filter
...
>
</v-autocomplete>
如该道具的文档中所写:
Do not apply filtering when searching. Useful when data is being
filtered server side
当我使用 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
变量。
我终于通过将此道具添加到 <v-autocomplete>
来修复它:
:filter="() => true"
您可以将 no-filter
道具应用到您的 v-autocomplete
组件。
<v-autocomplete
...
no-filter
...
>
</v-autocomplete>
如该道具的文档中所写:
Do not apply filtering when searching. Useful when data is being filtered server side