56 lines
1.0 KiB
Vue
56 lines
1.0 KiB
Vue
<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 './components/resources/LearningResource';
|
|
|
|
export default {
|
|
components: {
|
|
LearningResource
|
|
},
|
|
data() {
|
|
return {
|
|
storedResources: [
|
|
{
|
|
id: 'official-guide',
|
|
title: 'Oficial Guide',
|
|
description: 'The official documentation for Vue.js.',
|
|
link: 'https://vuejs.org'
|
|
},
|
|
{
|
|
id: 'duckduckgo',
|
|
title: 'Duckduckgo',
|
|
description: 'A search engine that values privacy.',
|
|
link: 'https://duckduckgo.com'
|
|
}
|
|
]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|