looping through the store

canvas-10-feb/src/components/NodesLayer.vue

 <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>
 

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: {},

canvas-10-feb/src/views/Home.vue

 <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>