stili e nuovo componente

Cristiano Magro

2025-01-07 86991ce9905eeea513635a340cda50f57296d896

stili e nuovo componente

 10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue

@@ -1,17 +1,13 @@
<template>
    <ul>
        <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description"
            :link="res.link">
        </learning-resource>
    </ul>
  <stored-resources :resources="storedResouces"> </stored-resources>
</template>

<script>
import LearningResource from './components/learning-resource/LearningResource.vue';
import StoredResources from './components/learning-resource/StoredResource.vue';

export default {
    components: {
        LearningResource: LearningResource,
    StoredResources: StoredResources,
    },
    data() {
        return {
@@ -20,18 +16,18 @@
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official Vue.js documentation',
                    link: 'https://vuejs.org'
          link: 'https://vuejs.org',
                },
                {
                    id: 'google',
                    title: 'Google',
                    description: 'Learn to google...',
                    link: 'https://google.com'
          link: 'https://google.com',
                },
            ]
        }
    }
}
      ],
    };
  },
};
</script>

<style>

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue

New file
@@ -0,0 +1,34 @@
<template>
  <ul>
    <learning-resource
      v-for="res in resources"
      :key="res.id"
      :title="res.title"
      :description="res.description"
      :link="res.link"
    >
    </learning-resource>
  </ul>
</template>

<script>
import LearningResource from './LearningResource.vue';

export default {
  components: {
    LearningResource: LearningResource,
  },

  props: ['resources'],
};
</script>

<style>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: auto;
  max-width: 40rem;
}
</style>