Add data attribute

src/DragContainer.vue

@@ -9,6 +9,8 @@
           <dd>{{ x }}, {{ y }}</dd>
           <dt>Size</dt>
           <dd>{{ w }} × {{ h }}</dd>
+          <dt>Data</dt>
+          <dd>{{ data }}</dd>
         </dl>
       </div>
     </slot>
@@ -28,6 +30,7 @@ export default {
           y: this.y,
           w: this.w,
           h: this.h,
+          data: this.data,
         })
       );
     },
@@ -38,6 +41,7 @@ export default {
     y: Number,
     w: Number,
     h: Number,
+    data: Object,
   },
 };
 </script>

src/Grid.vue

@@ -15,6 +15,7 @@
       :y="item.y"
       :w="item.w"
       :h="item.h"
+      :data="item.data"
     >
     </DragContainer>
     <slot></slot>
@@ -127,15 +128,15 @@ export default {
   data() {
     return {
       items: [
-        { x: 1, y: 3, w: 1, h: 1, key: "obj1" },
-        { x: 2, y: 1, w: 1, h: 1, key: "obj2" },
-        { x: 3, y: 1, w: 2, h: 2, key: "obj3" },
-        { x: 5, y: 2, w: 1, h: 1, key: "obj4" },
-        { x: 1, y: 1, w: 1, h: 2, key: "obj5" },
-        { x: 2, y: 3, w: 1, h: 1, key: "obj6" },
-        { x: 2, y: 2, w: 1, h: 3, key: "obj7" },
-        { x: 1, y: 4, w: 1, h: 1, key: "obj8" },
-        { x: 5, y: 3, w: 1, h: 1, key: "obj9" },
+        { x: 1, y: 3, w: 1, h: 1, key: "obj1", data: {} },
+        { x: 2, y: 1, w: 1, h: 1, key: "obj2", data: {} },
+        { x: 3, y: 1, w: 2, h: 2, key: "obj3", data: {} },
+        { x: 5, y: 2, w: 1, h: 1, key: "obj4", data: {} },
+        { x: 1, y: 1, w: 1, h: 2, key: "obj5", data: {} },
+        { x: 2, y: 3, w: 1, h: 1, key: "obj6", data: {} },
+        { x: 2, y: 2, w: 1, h: 3, key: "obj7", data: {} },
+        { x: 1, y: 4, w: 1, h: 1, key: "obj8", data: {} },
+        { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
       ],
     };
   },