From 0e6cb863206d1fd81f409f9e0d9b6fef0d717a1a Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 10 Feb 2023 12:10:18 +0100
Subject: [PATCH] Make data of example 4 a function
---
example/src/App.vue | 65 ++++++++++++++++++++++++++++++++++-----------
1 file changed, 50 insertions(+), 15 deletions(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index 9b47bbe..bf59520 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -74,18 +74,34 @@ import NumberCounter from "./components/NumberCounter.vue";
</drag-grid>
</div>
<div class="ttt-container">
- <label>
- Lesson 1 has length: {{ lesson1Length }}
- <input type="range" v-model="lesson1Length" min="1" max="5" step="1" />
- </label>
- <label>
- Lesson grid has width: {{ lesson1Cols }}
- <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
- </label>
- <label>
- Lesson grid has height: {{ lesson1Rows }}
- <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
- </label>
+ <div>
+ <label>
+ Lesson 1 has length: {{ lesson1Length }}
+ <input
+ type="range"
+ v-model="lesson1Length"
+ min="1"
+ max="5"
+ step="1"
+ />
+ </label>
+ <input type="text" v-model="lessonData.lesson1" />
+ </div>
+ <div>
+ <label>
+ Lesson grid has width: {{ lesson1Cols }}
+ <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
+ </label>
+ <input type="text" v-model="lessonData.lesson2" />
+ </div>
+ <div>
+ <label>
+ Lesson grid has height: {{ lesson1Rows }}
+ <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
+ <input type="text" v-model="lessonData.lesson3.inside" />
+ <input type="text" v-model="lessonData.lesson3.outside" />
+ </label>
+ </div>
<drag-grid
:value="lessons1"
@@ -207,6 +223,14 @@ export default {
lesson3X: -1,
lesson3Y: -1,
lesson3inPlan: false,
+ lessonData: {
+ lesson1: "Nothing",
+ lesson2: "Hallo",
+ lesson3: {
+ inside: "This is lesson 3 inside the plan",
+ outside: "This is lesson3 outside of the plan",
+ },
+ },
};
},
computed: {
@@ -222,7 +246,9 @@ export default {
w: 1,
h: this.lesson1Length,
key: "lesson1",
- data: {},
+ data: {
+ text: this.lessonData.lesson1,
+ },
},
{
x: (grid) => {
@@ -234,7 +260,9 @@ export default {
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson2",
- data: {},
+ data: {
+ text: this.lessonData.lesson2,
+ },
},
{
x: (grid) => {
@@ -252,7 +280,14 @@ export default {
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson3",
- data: {},
+ data: (grid) => {
+ return {
+ text:
+ grid.gridId === "lesson-storage"
+ ? this.lessonData.lesson3.outside
+ : this.lessonData.lesson3.inside,
+ };
+ },
},
];
},
--
GitLab