components dropdown displays component name on active route

Author: deanfchung

src/components/ComponentDisplay.vue

@@ -47,6 +47,7 @@ export default {
     ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
     // used in VueDraggableResizeable component
     activeRouteArray () {
+      // console.log('active route array method', this.routes[this.activeRoute])
       return this.routes[this.activeRoute]
     },
     // used to delete components

src/components/HomeSideDropDown.vue

@@ -20,13 +20,17 @@
                 </template>
               </q-input>
               -->
+              <a v-for="componentData in activeRouteDisplay"
+                :key="componentData.componentName"
+                >
    <q-list bordered separator>
       <q-item clickable v-ripple>
-        <q-item-section>Component Name</q-item-section>
+        <q-item-section>{{componentData.componentName}}</q-item-section>
 
       </q-item>
 
     </q-list>
+    </a>
             </div>
           </q-card-section>
         </q-card>
@@ -92,10 +96,21 @@
 </template>
 <script>
 import RouteDisplay from '../components/RouteDisplay'
+import { mapState } from 'vuex'
 
 export default {
   components: {
     RouteDisplay
+  },
+  computed: {
+    ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
+    // used in VueDraggableResizeable component
+    activeRouteDisplay () {
+      // console.log('active route array method', this.routes[this.activeRoute])
+      let component = this.routes[this.activeRoute]
+      console.log('component:', component)
+      return component
+    }
   }
 }
 </script>