From 4853a40aebb884b00bf367d47b82b8d3134b47d9 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 8 Feb 2023 17:50:56 +0100
Subject: [PATCH] Add data attribute
---
src/DragContainer.vue | 4 ++++
src/Grid.vue | 19 ++++++++++---------
2 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 81adf9c..49ee72a 100644
--- a/src/DragContainer.vue
+++ b/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>
diff --git a/src/Grid.vue b/src/Grid.vue
index 2dcf7ac..f1f6dee 100644
--- a/src/Grid.vue
+++ b/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: {} },
],
};
},
--
GitLab