lesson 132: adding my solution before the lesson

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

@@ -1,17 +1,22 @@
 <template>
   <base-card>
-    <form>
+    <form @submit.prevent="returnNewResource">
       <div class="form-control">
         <label for="title">Title</label>
-        <input type="text" name="title" id="title" />
+        <input type="text" name="title" id="title" v-model="title" />
       </div>
       <div class="form-control">
         <label for="description">Description</label>
-        <textarea name="description" id="description" rows="3"></textarea>
+        <textarea
+          name="description"
+          id="description"
+          rows="3"
+          v-model="description"
+        ></textarea>
       </div>
       <div class="form-control">
         <label for="link">Link</label>
-        <input type="text" name="link" id="link" />
+        <input type="text" name="link" id="link" v-model="link" />
       </div>
       <div>
         <base-button type="submit">Add Resource</base-button>
@@ -21,7 +26,27 @@
 </template>
 
 <script>
-export default {};
+export default {
+  emits: ['new-resource'],
+  data() {
+    return {
+      title: '',
+      description: '',
+      link: ''
+    };
+  },
+  methods: {
+    returnNewResource() {
+      const resource = {
+        id: this.title,
+        title: this.title,
+        description: this.description,
+        link: this.link
+      };
+      this.$emit('new-resource', resource);
+    }
+  }
+};
 </script>
 
 <style scoped>

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

@@ -11,7 +11,7 @@
       >Add Resource</base-button
     >
   </base-card>
-  <component :is="selectedTab"></component>
+  <component :is="selectedTab" @new-resource="storeNewResource"></component>
 </template>
 
 <script>
@@ -60,6 +60,10 @@ export default {
   methods: {
     setSelectedTab(tab) {
       this.selectedTab = tab;
+    },
+    storeNewResource(resource) {
+      this.storedResources.push(resource);
+      this.selectedTab = 'stored-resources';
     }
   },
   provide() {