lesson 114: add the base for dynamic components

2021-02-06 cmp-adv-01-starting-setup/src/App.vue

@@ -1,33 +1,35 @@
 <template>
     <div>
         <the-header></the-header>
-        <badge-list></badge-list>
-        <user-info
-            :full-name="activeUser.name"
-            :info-text="activeUser.description"
-            :role="activeUser.role"
-        ></user-info>
-        <course-goals #default="slotProps">
-            <h2>{{ slotProps.item }}</h2>
-        </course-goals>
+        <button @click="setSelectedComponent('active-goals')">
+            Active Goals
+        </button>
+        <button @click="setSelectedComponent('manage-goals')">
+            Manage Goals
+        </button>
+        <!-- <manage-goals
+            v-if="selectedComponent === 'manage-goals'"
+        ></manage-goals>
+        <active-goals
+            v-if="selectedComponent === 'active-goals'"
+        ></active-goals> -->
     </div>
 </template>
 
 <script>
 import TheHeader from "./components/TheHeader.vue";
-import BadgeList from "./components/BadgeList.vue";
-import UserInfo from "./components/UserInfo.vue";
-import CourseGoals from "./components/CourseGoals.vue";
+import ManageGoals from "./components/ManageGoals";
+import ActiveGoals from "./components/ActiveGoals";
 
 export default {
     components: {
         TheHeader,
-        BadgeList,
-        UserInfo,
-        CourseGoals,
+        ManageGoals,
+        ActiveGoals,
     },
     data() {
         return {
+            selectedComponent: "active-goals",
             activeUser: {
                 name: "Maximilian Schwarzmüller",
                 description: "Site owner and admin",
@@ -35,6 +37,11 @@ export default {
             },
         };
     },
+    methods: {
+        setSelectedComponent(cmp) {
+            this.selectedComponent = cmp;
+        },
+    },
 };
 </script>
 

2021-02-06 cmp-adv-01-starting-setup/src/components/ActiveGoals.vue

@@ -0,0 +1,3 @@
+<template>
+    <h2>Active Goals</h2>
+</template>

2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue

@@ -0,0 +1,3 @@
+<template>
+    <h2>Manage Goals</h2>
+</template>