From 10e9117c9ad47d2da0d14e7c5ce97ad21d60dd6a Mon Sep 17 00:00:00 2001
From: SuJiehao <megasu@qq.com>
Date: Thu, 8 Jun 2023 22:21:03 +0800
Subject: [PATCH] fix v-for key error

---
 lib/components/decoration3/src/main.vue | 36 +++++++--------
 lib/components/decoration6/src/main.vue | 59 ++++++++++++-------------
 2 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/lib/components/decoration3/src/main.vue b/lib/components/decoration3/src/main.vue
index 9928231..0931b47 100644
--- a/lib/components/decoration3/src/main.vue
+++ b/lib/components/decoration3/src/main.vue
@@ -1,28 +1,24 @@
 <template>
   <div class="dv-decoration-3" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
-
-      <template
+      <rect
         v-for="(point, i) in points"
+        :key="i"
+        :fill="mergedColor[0]"
+        :x="point[0] - halfPointSideLength"
+        :y="point[1] - halfPointSideLength"
+        :width="pointSideLength"
+        :height="pointSideLength"
       >
-        <rect
-          :key="i"
-          :fill="mergedColor[0]"
-          :x="point[0] - halfPointSideLength"
-          :y="point[1] - halfPointSideLength"
-          :width="pointSideLength"
-          :height="pointSideLength"
-        >
-          <animate
-            v-if="Math.random() > 0.6"
-            attributeName="fill"
-            :values="`${mergedColor.join(';')}`"
-            :dur="Math.random() + 1 + 's'"
-            :begin="Math.random() * 2"
-            repeatCount="indefinite"
-          />
-        </rect>
-      </template>
+        <animate
+          v-if="Math.random() > 0.6"
+          attributeName="fill"
+          :values="`${mergedColor.join(';')}`"
+          :dur="Math.random() + 1 + 's'"
+          :begin="Math.random() * 2"
+          repeatCount="indefinite"
+        />
+      </rect>
     </svg>
   </div>
 </template>
diff --git a/lib/components/decoration6/src/main.vue b/lib/components/decoration6/src/main.vue
index b044326..f8e20b1 100644
--- a/lib/components/decoration6/src/main.vue
+++ b/lib/components/decoration6/src/main.vue
@@ -1,39 +1,36 @@
 <template>
   <div class="dv-decoration-6" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
-      <template
+      <rect
         v-for="(point, i) in points"
+        :key="i"
+        :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
+        :x="point[0] - halfRectWidth"
+        :y="point[1] - heights[i] / 2"
+        :width="rectWidth"
+        :height="heights[i]"
       >
-        <rect
-          :key="i"
-          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
-          :x="point[0] - halfRectWidth"
-          :y="point[1] - heights[i] / 2"
-          :width="rectWidth"
-          :height="heights[i]"
-        >
-          <animate
-            attributeName="y"
-            :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
-            :dur="`${randoms[i]}s`"
-            keyTimes="0;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-          <animate
-            attributeName="height"
-            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
-            :dur="`${randoms[i]}s`"
-            keyTimes="0;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-        </rect>
-      </template>
+        <animate
+          attributeName="y"
+          :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
+          :dur="`${randoms[i]}s`"
+          keyTimes="0;0.5;1"
+          calcMode="spline"
+          keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="height"
+          :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
+          :dur="`${randoms[i]}s`"
+          keyTimes="0;0.5;1"
+          calcMode="spline"
+          keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </rect>
     </svg>
   </div>
 </template>