Merge pull request #1 from deanfchung/dean

list renders in dropdown menu

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

@@ -5,6 +5,7 @@
         <q-card>
           <q-card-section>
             <div class="input-container">
+              <!--
               <q-input
                 standout="bg-teal text-white"
                 bottom-slots
@@ -13,10 +14,23 @@
                 :dense="dense"
                 class="input-add"
               >
+
                 <template v-slot:append>
                   <q-btn round dense flat icon="add" />
                 </template>
               </q-input>
+              -->
+              <a v-for="componentData in activeRouteDisplay"
+                :key="componentData.componentName"
+                >
+   <q-list bordered separator>
+      <q-item clickable v-ripple>
+        <q-item-section>{{componentData.componentName}}</q-item-section>
+
+      </q-item>
+
+    </q-list>
+    </a>
             </div>
           </q-card-section>
         </q-card>
@@ -82,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>