fix(admin-can): 닉네임 검색 시 선택 칩이 사라지는 문제 수정
- v-autocomplete에 cache-items 적용으로 선택 항목 캐시 유지 - value-comparator를 id 기반(compareMember)으로 지정해 동등성 안정화 - items를 displaySearchItems(선택 ∪ 검색 목록)로 제공해 선택 항목 항상 포함 보장
This commit is contained in:
@@ -10,7 +10,7 @@
|
|||||||
<v-container>
|
<v-container>
|
||||||
<v-autocomplete
|
<v-autocomplete
|
||||||
v-model="selectedMembers"
|
v-model="selectedMembers"
|
||||||
:items="searchItems"
|
:items="displaySearchItems"
|
||||||
:loading="searchLoading"
|
:loading="searchLoading"
|
||||||
:search-input.sync="searchQuery"
|
:search-input.sync="searchQuery"
|
||||||
label="닉네임으로 사용자 검색 (여러 명 선택 가능)"
|
label="닉네임으로 사용자 검색 (여러 명 선택 가능)"
|
||||||
@@ -21,6 +21,8 @@
|
|||||||
small-chips
|
small-chips
|
||||||
clearable
|
clearable
|
||||||
outlined
|
outlined
|
||||||
|
cache-items
|
||||||
|
:value-comparator="compareMember"
|
||||||
@update:search-input="onSearch"
|
@update:search-input="onSearch"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -140,6 +142,23 @@ export default {
|
|||||||
names.push(...manualIds.map(String))
|
names.push(...manualIds.map(String))
|
||||||
}
|
}
|
||||||
return names
|
return names
|
||||||
|
},
|
||||||
|
// 검색 결과 목록에 현재 선택된 사용자들을 항상 포함시켜
|
||||||
|
// 선택 chip이 사라지지 않도록 보장
|
||||||
|
displaySearchItems() {
|
||||||
|
const map = new Map()
|
||||||
|
;(this.selectedMembers || []).forEach(m => {
|
||||||
|
if (m && (m.id !== undefined && m.id !== null)) {
|
||||||
|
map.set(String(m.id), m)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
;(this.searchItems || []).forEach(m => {
|
||||||
|
if (m && (m.id !== undefined && m.id !== null)) {
|
||||||
|
const key = String(m.id)
|
||||||
|
if (!map.has(key)) map.set(key, m)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return Array.from(map.values())
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -159,6 +178,16 @@ export default {
|
|||||||
this.$dialog.notify.success(message)
|
this.$dialog.notify.success(message)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// v-autocomplete의 선택 비교를 id 기준으로 수행
|
||||||
|
compareMember(a, b) {
|
||||||
|
if (a === b) return true
|
||||||
|
if (!a || !b) return false
|
||||||
|
const aid = typeof a === 'object' ? a.id : a
|
||||||
|
const bid = typeof b === 'object' ? b.id : b
|
||||||
|
if (aid === undefined || bid === undefined || aid === null || bid === null) return false
|
||||||
|
return String(aid) === String(bid)
|
||||||
|
},
|
||||||
|
|
||||||
onSearch(val) {
|
onSearch(val) {
|
||||||
this.searchQuery = val
|
this.searchQuery = val
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user