lesson 134: add a function to remove a resource

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

@@ -3,7 +3,9 @@
     <base-card>
       <header>
         <h3>{{ title }}</h3>
-        <base-button mode="flat">Delete</base-button>
+        <base-button mode="flat" @click="removeResource('id')"
+          >Delete</base-button
+        >
       </header>
       <p>{{ description }}</p>
       <nav><a :href="link">View Resource</a></nav>
@@ -13,7 +15,8 @@
 
 <script>
 export default {
-  props: ['title', 'description', 'link']
+  props: ['id', 'title', 'description', 'link'],
+  inject: ['removeResource']
 };
 </script>
 

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

@@ -3,6 +3,7 @@
     <learning-resource
       v-for="resource in storedResources"
       :key="resource.id"
+      :id="resource.id"
       :title="resource.title"
       :description="resource.description"
       :link="resource.link"

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

@@ -66,12 +66,19 @@ export default {
     storeNewResource(resource) {
       this.storedResources.unshift(resource);
       this.selectedTab = 'stored-resources';
+    },
+    removeResource(id) {
+      const resourceIndex = this.storedResources.findIndex(
+        resource => resource.id === id
+      );
+      this.storedResources.splice(resourceIndex, 1);
     }
   },
   provide() {
     return {
       storedResources: this.storedResources,
-      storeNewResource: this.storeNewResource
+      storeNewResource: this.storeNewResource,
+      removeResource: this.removeResource
     };
   }
 };