在我的案例中,我来自本地的 API 有具有相似标题的自定义帖子,并且我尝试通过items
数组中的搜索查询来显示帖子。
数据:
{
"count": 5,
"entries": [
{
"id": 3,
"title": "Senior developer Python"
},
{
"id": 4,
"title": "Senior developer Python"
},
{
"id": 5,
"title": "Senior developer Python"
}
]
}
验证自动完成代码:
<v-autocomplete
v-model="model"
:items="items"
:loading="isLoading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
item-text="Description"
item-value="API"
return-object
></v-autocomplete>
JavaScript代码:
<script>
export default {
data: () => ({
descriptionLimit: 60,
entries: [],
isLoading: false,
model: null,
search: null
}),
computed: {
items () {
return this.entries.map(entry => {
const Description = entry.title.length > this.descriptionLimit
? entry.title.slice(0, this.descriptionLimit) + '...'
: entry.title
return Object.assign({}, entry, { Description })
})
}
},
watch: {
search (val) {
// Items have already been requested
if (this.isLoading) return
this.isLoading = true
// Lazily load input items
fetch('https://api.website.org/posts')
.then(res => res.json())
.then(res => {
const { count, entries } = res
this.count = count
this.entries = entries
})
.catch(err => {
console.log(err)
})
.finally(() => (this.isLoading = false))
}
}
}
</script>
我如何也可以在自动填充中按标题显示所有相似的帖子?