Skip to content

Commit 501096b

Browse files
authored
Fix duplicate Service cards by ensuring unique Vue keys
The search feature was causing some Service cards to duplicate when multiple items in a group shared the same `name` value. Vue reused DOM nodes because the generated `key` for <Service> was not always unique: This caused instability during filtering and resulted in one of the cards being duplicated repeatedly until a full page reload.
1 parent 7e0b76f commit 501096b

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

src/components/ServiceGroup.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<GroupHeader v-if="group.name" :group="group" class="group-title" />
55
<Service
66
v-for="(item, index) in group.items"
7-
:key="`srv-${groupIndex}-${item.name || item.type || index}`"
7+
:key="`srv-${groupIndex}-${index}-${item.name || item.type}`"
88
:item="item"
99
:proxy="proxy"
1010
:class="item.class || group.class"
@@ -21,7 +21,7 @@
2121
/>
2222
<Service
2323
v-for="(item, index) in group.items"
24-
:key="`srv-${groupIndex}-${item.name || item.type || index}`"
24+
:key="`srv-${groupIndex}-${index}-${item.name || item.type}`"
2525
:item="item"
2626
:proxy="proxy"
2727
:class="[

0 commit comments

Comments
 (0)