lesson 125: move the list to a component
This commit is contained in:
parent
f3533827a2
commit
7d12edfe17
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<ul>
|
||||
<li v-for="resource in storedResources" :key="resource.id">
|
||||
{{ resource.title }}
|
||||
<ul>
|
||||
<li>
|
||||
{{ resource.description }}
|
||||
</li>
|
||||
<li>
|
||||
<a :href="resource.link">{{ resource.link }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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: [
|
||||
|
|
|
@ -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>
|
Reference in New Issue