javascript - Vuetify 自动完成类似项目未显示
问题描述
在我的本地APIitems
中,我有类似标题的自定义帖子,我尝试通过数组中的搜索查询来显示帖子。
数据:
{
"count": 5,
"entries": [
{
"id": 3,
"title": "Senior developer Python"
},
{
"id": 4,
"title": "Senior developer Python"
},
{
"id": 5,
"title": "Senior developer Python"
}
]
}
Vuetify 自动完成代码:
<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>
我如何在我的自动完成中按标题显示所有类似的帖子?
解决方案
尝试设置item-value
为id
喜欢:
<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="id"
return-object
></v-autocomplete>
查看this pen
推荐阅读
- oracle-sqldeveloper - SQL 开发人员中复制/迁移/导出之间的区别
- mysql - 使用 Take() to Mysql 的 Linq 查询不会对实际查询添加限制
- python-3.x - 如何在 Python Pandas 中合并另一个数据框中的特定列?
- c - 这个shellcode是什么意思?
- vba - 如何根据当前视图获取活动文件夹中前 X 项
- javascript - 在 PDF.js 中加载 pdf
- python - 异常处理,SyntaxError Vs ValueError Vs Default Exeption
- javascript - 查找所有元素并附加事件侦听器
- css - 何时使用 max-width: none 作为块?
- android-studio - 如何在 Android Studio 中正确导入新模块