fix(performance): use unique keys in v-for loops

Theo-Messi · Nov 9, 2024 · 23f57a4 · 23f57a4
1 parent ab8b7f4
commit 23f57a4
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/packages/Lumen/components/DocBox.vue b/packages/Lumen/components/DocBox.vue
@@ -7,8 +7,8 @@ const props = defineProps<{ items: BoxItem[] }>()
 <template>
   <div class="box-container">
     <a
-      v-for="box in props.items"
-      :key="box.link"
+      v-for="(box, index) in props.items"
+      :key="box.link + index"
       :href="box.link"
       :title="box.name"
       class="box"

diff --git a/packages/Lumen/components/DocBoxCube.vue b/packages/Lumen/components/DocBoxCube.vue
@@ -8,7 +8,7 @@ const props = defineProps<{ items: BoxCubeItem[] }>()
   <div class="container">
     <a
       v-for="(boxcube, index) in props.items"
-      :key="boxcube.name + index"
+      :key="boxcube.link + index"
       class="link"
       :href="boxcube.link"
       :title="boxcube.name"

diff --git a/packages/Lumen/components/DocLinks.vue b/packages/Lumen/components/DocLinks.vue
@@ -7,8 +7,8 @@ const props = defineProps<{ items: LinkItem[] }>()
 <template>
   <div class="container">
     <a
-      v-for="link in props.items"
-      :key="link.name"
+      v-for="(link, index) in props.items"
+      :key="link.link + index"
       :href="link.link"
       :title="link.name"
       :target="isExternalLink(link.link) ? '_blank' : '_self'"

diff --git a/packages/Lumen/components/HomeFooter.vue b/packages/Lumen/components/HomeFooter.vue
@@ -9,7 +9,7 @@ const footer = props.Footer_Data
 <template>
   <footer class="footer">
     <div class="list-containe" v-if="footer.group">
-      <div class="list-content" v-for="(section, index) in footer.group || []" :key="index">
+      <div class="list-content" v-for="(section, index) in footer.group || []" :key="section.title + index">
         <div class="list-title">
           <template v-if="section.icon">
             <i v-if="section.icon" :class="section.icon" :style="{ color: section.style }"></i>
@@ -23,7 +23,7 @@ const footer = props.Footer_Data
           {{ section.title }}
         </div>
         <ul class="list-link">
-          <li v-for="(link, idx) in section.links" :key="idx">
+          <li v-for="(link, idx) in section.links" :key="link.name + idx">
             <template v-if="link.icon">
               <i v-if="link.icon" :class="link.icon" :style="{ color: link.style }"></i>
               <Icon v-if="isIconifyIcon(link.icon)" :icon="link.icon" :style="{ color: link.style }" />