lesson 126: split the resources into multiple components

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

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

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

@@ -0,0 +1,7 @@
+<template> </template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

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

@@ -0,0 +1,29 @@
+<template>
+  <ul>
+    <learning-resource
+      v-for="resource in storedResources"
+      :key="resource.id"
+      :title="resource.title"
+      :description="resource.description"
+      :link="resource.link"
+    ></learning-resource>
+  </ul>
+</template>
+<script>
+import LearningResource from './LearningResource';
+export default {
+  components: {
+    LearningResource
+  },
+  props: ['stored-resources']
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin: auto;
+  max-width: 40rem;
+}
+</style>