Merge pull request #84 from BKWLD/unique-keys-on-clones

Add unique keys to clones
BKWLD · Aug 31, 2022 · 8ac485c · 8ac485c
2 parents 331d5ec + 93cdad0
commit 8ac485c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/demo/components/demos/peeking/cloning.vue b/demo/components/demos/peeking/cloning.vue
@@ -1,10 +1,12 @@
 <template>
 
 <ssr-carousel loop :slides-per-page='3' :peek='40' show-arrows>
-  <slide :index='1' tint='red'></slide>
-  <slide :index='2' tint='orange'></slide>
-  <slide :index='3' tint='yellow'></slide>
-  <slide :index='4' tint='green'></slide>
+  <slide
+    v-for="color, index in ['red', 'orange', 'yellow', 'green']"
+    :key='color'
+    :index='index + 1'
+    :tint='color'>
+  </slide>
 </ssr-carousel>
 
 </template>
diff --git a/demo/content/peeking.md b/demo/content/peeking.md
@@ -41,10 +41,12 @@ Note how there is only one more slide than the amount we're showing per page. Th
 
 ```vue
 <ssr-carousel loop :slides-per-page='3' :peek='40' show-arrows>
-  <slide :index='1' tint='red'></slide>
-  <slide :index='2' tint='orange'></slide>
-  <slide :index='3' tint='yellow'></slide>
-  <slide :index='4' tint='green'></slide>
+  <slide
+    v-for="color, index in ['red', 'orange', 'yellow', 'green']"
+    :key='color'
+    :index='index + 1'
+    :tint='color'>
+  </slide>
 </ssr-carousel>
 
 <ssr-carousel loop :slides-per-page='2' :peek='80' paginate-by-slide show-arrows>

diff --git a/index.js b/index.js
@@ -671,6 +671,11 @@ interactiveSelector = 'a, button, input, textarea, select';
 
         if (isPeekingClone || indexOf.call(this.activeSlides, index) < 0) {
           vnode.data.attrs['aria-hidden'] = 'true';
+        } // Prevent duplicate keys on clones
+
+
+        if (isPeekingClone && vnode.key) {
+          vnode.key += '-clone-' + index;
         } // Return modified vnode
 
 
@@ -762,10 +767,10 @@ interactiveSelector = 'a, button, input, textarea, select';
 });
 // CONCATENATED MODULE: ./src/ssr-carousel-track.vue?vue&type=script&lang=coffee&
  /* harmony default export */ var src_ssr_carousel_trackvue_type_script_lang_coffee_ = (ssr_carousel_trackvue_type_script_lang_coffee_); 
-// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./src/ssr-carousel-track.vue?vue&type=style&index=0&id=d4be1c2a&prod&lang=stylus&
+// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./src/ssr-carousel-track.vue?vue&type=style&index=0&id=b3a34fb0&prod&lang=stylus&
 // extracted by mini-css-extract-plugin
 
-// CONCATENATED MODULE: ./src/ssr-carousel-track.vue?vue&type=style&index=0&id=d4be1c2a&prod&lang=stylus&
+// CONCATENATED MODULE: ./src/ssr-carousel-track.vue?vue&type=style&index=0&id=b3a34fb0&prod&lang=stylus&
 
 // CONCATENATED MODULE: ./src/ssr-carousel-track.vue
 var ssr_carousel_track_render, ssr_carousel_track_staticRenderFns

diff --git a/src/ssr-carousel-track.vue b/src/ssr-carousel-track.vue
@@ -82,6 +82,10 @@ export default
 			if isPeekingClone or index not in @activeSlides
 			then vnode.data.attrs['aria-hidden'] = 'true'
 
+			# Prevent duplicate keys on clones
+			if isPeekingClone and vnode.key
+			then vnode.key += '-clone-' + index
+
 			# Return modified vnode
 			return vnode