Migrating example

Author: David-Desmaisons

example/components/clone-on-control.vue

@@ -8,19 +8,29 @@
         :clone="clone"
         :group="{ name: 'people', pull: pullFunction }"
         @start="start"
+        item-key="id"
       >
-        <div class="list-group-item" v-for="element in list1" :key="element.id">
-          {{ element.name }}
-        </div>
+        <template #item="{ element }">
+          <div class="list-group-item">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 
     <div class="col-3">
       <h3>Draggable 2</h3>
-      <draggable class="dragArea list-group" :list="list2" group="people">
-        <div class="list-group-item" v-for="element in list2" :key="element.id">
-          {{ element.name }}
-        </div>
+      <draggable
+        class="dragArea list-group"
+        :list="list2"
+        group="people"
+        item-key="id"
+      >
+        <template #item="{ element }">
+          <div class="list-group-item">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 

example/components/clone.vue

@@ -7,14 +7,13 @@
         :list="list1"
         :group="{ name: 'people', pull: 'clone', put: false }"
         @change="log"
+        item-key="name"
       >
-        <div
-          class="list-group-item"
-          v-for="element in list1"
-          :key="element.name"
-        >
-          {{ element.name }}
-        </div>
+        <template #item="{ element }">
+          <div class="list-group-item">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 
@@ -25,14 +24,13 @@
         :list="list2"
         group="people"
         @change="log"
+        item-key="name"
       >
-        <div
-          class="list-group-item"
-          v-for="element in list2"
-          :key="element.name"
-        >
-          {{ element.name }}
-        </div>
+        <template #item="{ element }">
+          <div class="list-group-item">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 

example/components/custom-clone.vue

@@ -8,10 +8,13 @@
         :group="{ name: 'people', pull: 'clone', put: false }"
         :clone="cloneDog"
         @change="log"
+        item-key="id"
       >
-        <div class="list-group-item" v-for="element in list1" :key="element.id">
-          {{ element.name }}
-        </div>
+        <template #item="{ element }">
+          <div class="list-group-item">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 
@@ -22,10 +25,13 @@
         :list="list2"
         group="people"
         @change="log"
+        item-key="id"
       >
-        <div class="list-group-item" v-for="element in list2" :key="element.id">
-          {{ element.name }}
-        </div>
+        <template #item="{ element }">
+          <div class="list-group-item">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 

example/components/footerslot.vue

@@ -12,16 +12,15 @@
         :animation="100"
         @start="dragging = true"
         @end="dragging = false"
+        item-key="name"
       >
-        <div
-          class="list-group-item item"
-          v-for="element in list"
-          :key="element.name"
-        >
-          {{ element.name }}
-        </div>
+        <template #item="{ element }">
+          <div class="list-group-item item">
+            {{ element.name }}
+          </div>
+        </template>
 
-        <template v-slot:footer>
+        <template #footer>
           <div
             class="btn-group list-group-item"
             role="group"
@@ -58,10 +57,8 @@ export default {
       ],
       dragging: false,
       componentData: {
-        props: {
-          type: "transition",
-          name: "flip-list"
-        }
+        type: "transition",
+        name: "flip-list"
       }
     };
   },

src/core/componentStructure.js

@@ -1,5 +1,6 @@
 const getHtmlElementFromNode = ({ el }) => el;
-const addContext = (domElement, context) => (domElement.__draggable_context = context);
+const addContext = (domElement, context) =>
+  (domElement.__draggable_context = context);
 const getContext = domElement => domElement.__draggable_context;
 
 class ComponentStructure {