MVP fully reactive

Author: ziggrace

src/components/ComponentDetails.vue

@@ -14,21 +14,21 @@
         <q-tab name="props" label="Component Props" id="label-text" />
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
-        <q-tab-panel name="state" v-model="compoent">
+        <q-tab-panel name="state" v-model="activeState">
           <ul id="stateList">
             <li v-for="comp in activeState" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
-        <q-tab-panel name="actions">
+        <q-tab-panel name="actions" v-model="activeActions">
           <ul id="actionList">
             <li v-for="comp in activeActions" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
-        <q-tab-panel name="props">
+        <q-tab-panel name="props" v-model="activeProps">
           <ul id="propsList">
             <li v-for="comp in activeProps" :key="comp">
               {{ comp }}
@@ -48,29 +48,24 @@ export default {
   name: "ComponentDetails",
   computed: {
     ...mapState(["activeComponentObj"]),
-    // component: {
-    //     get(){
-    //         return this.activeComponentObj
-    //     }
-    // },
     activeState: {
-        get(){
-            if (this.activeComponentObj) return this.activeComponentObj.state;
-            return []
-        }
+      get() {
+        if (this.activeComponentObj) return this.activeComponentObj.state;
+        return []
+      },
     },
     activeProps: {
-        get(){
-            if (this.activeComponentObj) return this.activeComponentObj.props;
-            return []
-        }
+      get() {
+        if (this.activeComponentObj) return this.activeComponentObj.props;
+        return [];
+      },
     },
     activeActions: {
-        get(){
-            if (this.activeComponentObj) return this.activeComponentObj.actions;
-            return []
-        }
-    }
+      get() {
+        if (this.activeComponentObj) return this.activeComponentObj.actions;
+        return [];
+      },
+    },
     // componentActions: {
     //   get() {
     //     return this.$store.state.activeComponentObj.actions;

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -226,6 +226,7 @@ export default {
           return comp.componentName === this.activeComponent;
         })[0]
       );
+      console.log("Active comp 2", this.$store.state.activeComponentObj)
     },
     createNewProp (text) {
       if (!this.$store.state.userProps.includes(text)) {

src/store/mutations.js

@@ -104,6 +104,9 @@ const mutations = {
       }
     }
     state.selectedActions = []
+    // super weird code, minor changes to objects are not reactive
+    // setting to null and then resetting to object makes it reactive
+    state.activeComponentObj = null
     state.activeComponentObj = active
   },
 
@@ -130,6 +133,7 @@ const mutations = {
       }
     }
     state.selectedProps = []
+    state.activeComponentObj = null
     state.activeComponentObj = active
   },
 
@@ -156,6 +160,7 @@ const mutations = {
       }
     }
     state.selectedState = []
+    state.activeComponentObj = null
     state.activeComponentObj = active
   },
   // *** HTML ELEMENTS *** //////////////////////////////////////////////