반응형
Vuetify 자동 완성 유사 항목이 표시되지 않습니다.
내 경우 로컬 API에서 비슷한 제목의 커스텀 게시물이 있으며, 나는 검색 쿼리로 게시물을 표시하려고 했습니다.items어레이를 설정합니다.
데이터:
{
"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>
확인하다
또한 자동 보완 장치는 항목에서 정확히 일치하는 항목을 찾으려고 시도합니다.서버측의 제안에는,v-combobox.
언급URL : https://stackoverflow.com/questions/57038191/vuetify-autocomplete-similar-items-are-not-showing
반응형
'source' 카테고리의 다른 글
| ODBC를 사용하지 않고 Java에서 접근 데이터베이스 조작 (0) | 2022.09.03 |
|---|---|
| ArrayList에서 임의 항목 검색 (0) | 2022.09.03 |
| 시스템을 사용하는 것이 좋습니까?어레이를 복사하기 위한 for 루프가 아닌 arraycopy(...)를 선택하십시오. (0) | 2022.09.03 |
| 줄바꿈(JLABEL) (0) | 2022.09.03 |
| C#의 네임스페이스와 Java 패키지의 차이 (0) | 2022.09.03 |