Fixed issue where v-for keys could clash if two groups had the same name

1 files changed, 8 insertions, 5 deletions

diff --git a/src/App.vue b/src/App.vue
index fda13c3..042fb07 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,8 +69,11 @@
 
           <!-- Horizontal layout -->
           <div v-if="!vlayout || filter" class="columns is-multiline">
-            <template v-for="group in services">
-              <h2 v-if="group.name" class="column is-full group-title">
+            <template v-for="(group, groupIndex) in services">
+              <h2 
+                v-if="group.name"
+                class="column is-full group-title"
+                :key="`header-${groupIndex}`">
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 <div v-else-if="group.logo" class="group-logo media-left">
                   <figure class="image is-48x48">
@@ -81,7 +84,7 @@
               </h2>
               <Service
                 v-for="(item, index) in group.items"
-                :key="index"
+                :key="`service-${groupIndex}-${index}`"
                 :item="item"
                 :proxy="config.proxy"
                 :class="['column', `is-${12 / config.columns}`]"
@@ -96,8 +99,8 @@
           >
             <div
               :class="['column', `is-${12 / config.columns}`]"
-              v-for="group in services"
-              :key="group.name"
+              v-for="(group, groupIndex) in services"
+              :key="groupIndex"
             >
               <h2 v-if="group.name" class="group-title">
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>