You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.4 KiB
84 lines
1.4 KiB
<template>
|
|
<div>
|
|
<ul
|
|
class="test-list"
|
|
v-for="todo in todosList"
|
|
:key="todo.id"
|
|
>
|
|
<li class="test-list--item">
|
|
{{ todo.id }} <br> {{todo.title}}
|
|
<br>
|
|
<div v-if="todo.completed" style="color:green">
|
|
Complete
|
|
</div>
|
|
<div v-else style="color:red">
|
|
Dont Complete
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
todosList: []
|
|
};
|
|
},
|
|
mounted() {
|
|
axios.get("https://jsonplaceholder.typicode.com/todos/")
|
|
.then(response => {
|
|
this.todosList = [...response.data].slice(0, 20)
|
|
})
|
|
.catch(err => {
|
|
// Manage the state of the application if the request
|
|
// has failed
|
|
console.log(err)
|
|
|
|
})
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.test-list {
|
|
font-family: Roboto;
|
|
list-style: none;
|
|
margin: 20px auto;
|
|
width: 50%;
|
|
}
|
|
|
|
.test-list--item {
|
|
border: 1px solid rgb(41, 41, 41);
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
display: block;
|
|
box-shadow: 2px 2px rgba(138, 124, 124, 0.4);
|
|
}
|
|
|
|
.test-list--id {
|
|
font-weight: 300;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.test-list--title {
|
|
font-weight: 500;
|
|
margin: 20px auto;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.test-list--complete {
|
|
font-weight: 600;
|
|
margin: 10px auto;
|
|
color: #56ca86;
|
|
}
|
|
|
|
.test-list--incomplete {
|
|
font-weight: 600;
|
|
margin: 10px auto;
|
|
color: #ca5656;
|
|
}
|
|
</style>
|