added nested with v-model and vuex example

Author: Wayne Van Son

dist/vuedraggable.common.js

@@ -1,7 +1,7 @@
 <template>
-  <div class="row">
-    <nested-test class="col-8"  v-model="elements"/>
-    <raw-displayer class="col-4" :title="'Vuex Store'" :value="elements"/>
+  <div class="justify-content-between row">
+    <nested-test class="col-8" v-model="elements" />
+    <raw-displayer class="col-4" :title="'Vuex Store'" :value="elements" />
   </div>
 </template>
 
@@ -11,7 +11,7 @@ import rawDisplayer from "./infra/raw-displayer.vue";
 
 export default {
   name: "nested-with-vmodel",
-  display: "Nested with v-model & Vuex",
+  display: "Nested (v-model & vuex)",
   order: 16,
   components: {
     NestedTest,
@@ -20,11 +20,10 @@ export default {
   computed: {
     elements: {
       get() {
-        return this.$store.state.nestedA.elements;
+        return this.$store.state.nested.elements;
       },
       set(value) {
-        console.log(value);
-        this.$store.dispatch("nestedA/updateElements", value);
+        this.$store.dispatch("nested/updateElements", value);
       }
     }
   },

dist/vuedraggable.common.js.map

@@ -3,7 +3,7 @@ import Vue from "vue";
 
 Vue.use(Vuex);
 
-export const nestedA = {
+export const nested = {
   namespaced: true,
   state: {
     elements: [
@@ -18,12 +18,12 @@ export const nestedA = {
         elements: [
           {
             id: 4,
-            name: "King",
+            name: "Lord Farquad",
             elements: []
           },
           {
             id: 5,
-            name: "Queen",
+            name: "Prince Charming",
             elements: []
           }
         ]
@@ -45,4 +45,4 @@ export const nestedA = {
       commit("updateElements", payload);
     }
   }
-}
+};

dist/vuedraggable.umd.js

@@ -1,25 +1,31 @@
 <style scoped>
 .item-container {
-  border: solid black 1px;
-  min-height: 2rem;
+  max-width: 20rem;
+  margin: 0;
 }
 
 .item {
   padding: 1rem;
-
+  border: solid black 1px;
+  background-color: #fefefe;
 }
 .item-sub {
-  padding:1rem;
-  margin: 0 0 0 1rem
+  margin: 0 0 0 1rem;
 }
 </style>
 
-
 <template>
-  <draggable v-bind="dragOptions" class="item-container" :list="list" :value="value" @input="emitter">
-    <div class="item-group" :key="el.id" v-for="(el, i) in realValue">
+  <draggable
+    v-bind="dragOptions"
+    tag="div"
+    class="item-container"
+    :list="list"
+    :value="value"
+    @input="emitter"
+  >
+    <div class="item-group" :key="el.id" v-for="el in realValue">
       <div class="item">{{ el.name }}</div>
-      <nested-test class="item-sub" :list="el.elements"/>
+      <nested-test class="item-sub" :list="el.elements" />
     </div>
   </draggable>
 </template>
@@ -38,11 +44,17 @@ export default {
   },
   computed: {
     dragOptions() {
-      return {transition: 200,}
+      return {
+        animation: 0,
+        group: "description",
+        disabled: false,
+        ghostClass: "ghost"
+      };
     },
+    // this.value when input = v-model
+    // this.list  when input != v-model
     realValue() {
-      const test = this.value ? this.value : this.list;
-      return test;
+      return this.value ? this.value : this.list;
     }
   },
   props: {