lesson 125: move the list to a component

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

@@ -1,21 +1,22 @@
 <template>
   <ul>
-    <li v-for="resource in storedResources" :key="resource.id">
+    <learning-resource
-      {{ resource.title }}
+      v-for="resource in storedResources"
-      <ul>
+      :key="resource.id"
-        <li>
+      :title="resource.title"
-          {{ resource.description }}
+      :description="resource.description"
-        </li>
+      :link="resource.link"
-        <li>
+    ></learning-resource>
-          <a :href="resource.link">{{ resource.link }}</a>
-        </li>
-      </ul>
-    </li>
   </ul>
 </template>
 
 <script>
+import LearningResource from './components/resources/LearningResource';
+
 export default {
+  components: {
+    LearningResource
+  },
   data() {
     return {
       storedResources: [

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

@@ -0,0 +1,20 @@
+<template>
+  <li>
+    <div>
+      <header>
+        <h3>{{ title }}</h3>
+        <button>Delete</button>
+      </header>
+    </div>
+    <p>{{ description }}</p>
+    <nav><a :href="link">View Resource</a></nav>
+  </li></template
+>
+
+<script>
+export default {
+  props: ['title', 'description', 'link']
+};
+</script>
+
+<style></style>