Commit e49aaf2

committed

ListItem Component and Item Component, and Get Items with axios

1 parent ba6ad91 commit e49aaf2Copy full SHA for e49aaf2

File tree

+93

-3

lines changed

+93

-3

lines changed

Lines changed: 31 additions & 0 deletions

Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Lines changed: 1 addition & 0 deletions

Lines changed: 36 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,36 @@`
	`1`	`+<template>`
	`2`	`+ <div class="row">`
	`3`	`+ <div class="col-8 mx-auto">`
	`4`	`+ <b-list-group v-bind:key="item.id" v-for="item in items">`
	`5`	`+ <ListItem v-bind:data="item"></ListItem>`
	`6`	`+ </b-list-group>`
	`7`	`+ </div>`
	`8`	`+ </div>`
	`9`	`+</template>`
	`10`	`+`
	`11`	`+<script>`
	`12`	`+import axios from "axios";`
	`13`	`+`
	`14`	`+import ListItem from "@/components/ListItem.vue";`
	`15`	`+`
	`16`	`+export default {`
	`17`	`+ name: "List",`
	`18`	`+ data() {`
	`19`	`+ return {`
	`20`	`+ items: []`
	`21`	`+ };`
	`22`	`+ },`
	`23`	`+ components: {`
	`24`	`+ ListItem`
	`25`	`+ },`
	`26`	`+ created() {`
	`27`	`+ axios`
	`28`	`+ .get("https://jsonplaceholder.typicode.com/todos?_limit=5")`
	`29`	`+ .then(res => (this.items = res.data))`
	`30`	`+ .catch(err => console.log(err));`
	`31`	`+ }`
	`32`	`+};`
	`33`	`+</script>`
	`34`	`+`
	`35`	`+<style scoped>`
	`36`	`+</style>`

Lines changed: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,18 @@`
	`1`	`+<template>`
	`2`	`+ <b-list-group-item button>{{data.title}}</b-list-group-item>`
	`3`	`+</template>`
	`4`	`+`
	`5`	`+<script>`
	`6`	`+export default {`
	`7`	`+ name: "ListItem",`
	`8`	`+ props: {`
	`9`	`+ data: {`
	`10`	`+ id: String,`
	`11`	`+ title: String`
	`12`	`+ }`
	`13`	`+ }`
	`14`	`+};`
	`15`	`+</script>`
	`16`	`+`
	`17`	`+<style scoped>`
	`18`	`+</style>`

Lines changed: 7 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,17 +1,21 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div class="col-12">`
`3`		`- <h1>{{title}}</h1>`
	`3`	`+ <h3 class="m-2">{{title}}</h3>`
	`4`	`+ <List />`
`4`	`5`	`</div>`
`5`	`6`	`</template>`
`6`	`7`
`7`	`8`	`<script>`
`8`		`-`
	`9`	`+importListfrom"@/components/List"`
`9`	`10`	`export default {`
`10`	`11`	`name: 'Home',`
`11`	`12`	`data() {`
`12`	`13`	`return {`
`13`		`- title: 'This is an home page'`
	`14`	`+ title: 'Notas'`
`14`	`15`	`}`
`15`	`16`	`},`
	`17`	`+ components: {`
	`18`	`+ List`
	`19`	`+ }`
`16`	`20`	`}`
`17`	`21`	`</script>`

Comments

(0)