From 81ae56f85b48b7239aa876364ce66f69c7942dcf Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 18 Feb 2020 00:25:38 +0000
Subject: [PATCH] looping through the store
---
canvas-10-feb/src/components/NodesLayer.vue | 24 ++++++++++++---------
canvas-10-feb/src/store/index.js | 6 +++++-
canvas-10-feb/src/views/Home.vue | 7 ++++--
3 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index 6278e4d..b53f533 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -1,24 +1,29 @@
<template>
- <div class="node" ref="nodes">
- <form id="editForm" class="myScroll">
- <textarea></textarea>
- <p>markdown supported</p>
- <button>delete</button>
- </form>
+ <!-- make container draggable using ref suppose to help with rapid dragging, DOESNT -->
+ <div ref="nodes">
+ <div class="node">
+ <form id="editForm" class="myScroll">
+ <textarea ref="notetext" v-model="nodetext"></textarea>
+
+ <p>{{ nodetext }} markdown supported</p>
+ <button>delete</button>
+ </form>
+ </div>
</div>
</template>
<script>
-import { mapState } from 'vuex'
import { drag } from './mixins/drag.js'
export default {
name: 'NodesLayer',
mixins: [drag],
+ props: {
+ nodetext: String
+ },
mounted() {
var nodes = this.$refs.nodes
-
this.makeDraggable(nodes)
},
methods: {
@@ -27,8 +32,7 @@ export default {
},
editNodeText() {},
deleteFlag() {}
- },
- computed: mapState({})
+ }
}
</script>
diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js
index 353e3ec..75fb6f8 100644
--- a/canvas-10-feb/src/store/index.js
+++ b/canvas-10-feb/src/store/index.js
@@ -20,7 +20,11 @@ export default new Vuex.Store({
width: 10,
fill: 'black'
},
- configNodes: {}
+ configNodes: [
+ { id: 1, text: 'node 1' },
+ { id: 2, text: 'node 2' },
+ { id: 3, text: 'node 3' }
+ ]
},
mutations: {},
actions: {},
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 1591e67..406bf69 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,8 +1,11 @@
<template>
<div class="home">
<!-- The number of NodesLayers comes from store -->
- <NodesLayer />
- <NodesLayer />
+ <NodesLayer
+ v-for="(value, index) in configNodes"
+ v-bind:key="index"
+ v-bind:nodetext="configNodes.text"
+ />
<CanvasLayer />
<ControlsLayer />
</div>
--
GitLab