lesson 130: add tabs

2021-02-08 prj-cmp-01-starting-setup/src/App.vue

@@ -1,33 +1,15 @@
 <template>
   <the-header title="One big application"></the-header>
-  <stored-resources :stored-resources="storedResources"></stored-resources>
+  <the-resources></the-resources>
 </template>
 
 <script>
 import TheHeader from './components/layouts/TheHeader';
-import storedResources from './components/resources/StoredResources';
+import TheResources from './components/resources/TheResources.vue';
 export default {
   components: {
-    storedResources,
-    TheHeader
-  },
-  data() {
-    return {
-      storedResources: [
-        {
-          id: 'official-guide',
-          title: 'Oficial Guide',
-          description: 'The official documentation for Vue.js.',
-          link: 'https://vuejs.org'
-        },
-        {
-          id: 'duckduckgo',
-          title: 'Duckduckgo',
-          description: 'A search engine that values privacy.',
-          link: 'https://duckduckgo.com'
-        }
-      ]
-    };
+    TheHeader,
+    TheResources
   }
 };
 </script>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue

@@ -0,0 +1,9 @@
+<template>
+  <h2>Add Resource</h2>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/StoredResources.vue

@@ -15,7 +15,7 @@ export default {
   components: {
     LearningResource
   },
-  props: ['stored-resources']
+  inject: ['storedResources']
 };
 </script>
 <style scoped>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/TheResources.vue

@@ -0,0 +1,53 @@
+<template>
+  <base-card>
+    <base-button @click="setSelectedTab('stored-resources')"
+      >Stored Resources</base-button
+    >
+    <base-button @click="setSelectedTab('add-resources')"
+      >Add Resource</base-button
+    >
+  </base-card>
+  <component :is="selectedTab"></component>
+</template>
+
+<script>
+import StoredResources from './StoredResources';
+import AddResource from './AddResource';
+export default {
+  components: {
+    StoredResources,
+    AddResource
+  },
+  data() {
+    return {
+      selectedTab: 'stored-resources',
+      storedResources: [
+        {
+          id: 'official-guide',
+          title: 'Oficial Guide',
+          description: 'The official documentation for Vue.js.',
+          link: 'https://vuejs.org'
+        },
+        {
+          id: 'duckduckgo',
+          title: 'Duckduckgo',
+          description: 'A search engine that values privacy.',
+          link: 'https://duckduckgo.com'
+        }
+      ]
+    };
+  },
+  methods: {
+    setSelectedTab(tab) {
+      this.selectedTab = tab;
+    }
+  },
+  provide() {
+    return {
+      storedResources: this.storedResources
+    };
+  }
+};
+</script>
+
+<style></style>