Commit 850d306

committed

ListItem Component and Item Component. | Get Items with axios. | Create Multiple Base Components. | Delete Item Functionality.

1 parent e49aaf2 commit 850d306Copy full SHA for 850d306

File tree

+42

-2

lines changed

+42

-2

lines changed

100755100644

File mode changed.

Lines changed: 26 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,26 @@`
	`1`	`+<template>`
	`2`	`+ <b-button @click="$emit('del-todo')" variant="danger">Button</b-button>`
	`3`	`+</template>`
	`4`	`+`
	`5`	`+<script>`
	`6`	`+export default {`
	`7`	`+ name: "DeleteButton",`
	`8`	`+`
	`9`	`+ data() {`
	`10`	`+ return {`
	`11`	`+ id: String`
	`12`	`+ }`
	`13`	`+ }`
	`14`	`+};`
	`15`	`+</script>`
	`16`	`+`
	`17`	`+<style scoped>`
	`18`	`+img {`
	`19`	`+ display: block;`
	`20`	`+ margin: 0 auto;`
	`21`	`+ width: 50px;`
	`22`	`+ height: 50px;`
	`23`	`+ background-color: red;`
	`24`	`+ color: seashell;`
	`25`	`+}`
	`26`	`+</style>`

Lines changed: 8 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`<div class="row">`
`3`	`3`	`<div class="col-8 mx-auto">`
`4`	`4`	`<b-list-group v-bind:key="item.id" v-for="item in items">`
`5`		`- <ListItem v-bind:data="item"></ListItem>`
	`5`	`+ <ListItem v-bind:data="item"v-on:del-todo="deleteItem"></ListItem>`
`6`	`6`	`</b-list-group>`
`7`	`7`	`</div>`
`8`	`8`	`</div>`
`@@ -28,7 +28,14 @@ export default {`
`28`	`28`	`.get("https://jsonplaceholder.typicode.com/todos?_limit=5")`
`29`	`29`	`.then(res => (this.items = res.data))`
`30`	`30`	`.catch(err => console.log(err));`
	`31`	`+ },`
	`32`	`+ methods: {`
	`33`	`+ deleteItem(id) {`
	`34`	`+ console.log(id)`
	`35`	`+ this.items = this.items.filter(todo => todo.id !== id)`
	`36`	`+ }`
`31`	`37`	`}`
	`38`	`+`
`32`	`39`	`};`
`33`	`40`	`</script>`
`34`	`41`

Lines changed: 8 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,22 @@`
`1`	`1`	`<template>`
`2`		`- <b-list-group-item button>{{data.title}}</b-list-group-item>`
	`2`	`+ <b-list-group-item button >`
	`3`	`+ {{data.title}}`
	`4`	`+ <deleteButton v-on:del-todo="$emit('del-todo', data.id)"></deleteButton>`
	`5`	`+ </b-list-group-item>`
`3`	`6`	`</template>`
`4`	`7`
`5`	`8`	`<script>`
	`9`	`+import DeleteButton from "@/components/DeleteButton.vue";`
`6`	`10`	`export default {`
`7`	`11`	`name: "ListItem",`
`8`	`12`	`props: {`
`9`	`13`	`data: {`
`10`	`14`	`id: String,`
`11`	`15`	`title: String`
`12`	`16`	`}`
	`17`	`+ },`
	`18`	`+ components: {`
	`19`	`+ DeleteButton`
`13`	`20`	`}`
`14`	`21`	`};`
`15`	`22`	`</script>`

Comments

(0)