1<template>
2 <div>
3 <h1>{{ title }}</h1>
4 <ul>
5 <li v-for="user in users" :key="user.id">{{ user.id }}. {{ user.name }} - {{ user.email }}</li>
6 </ul>
7 </div>
8</template>
9
10<script>
11 import axios from 'axios'
12
13 export default {
14 name: 'Users',
15 props: {
16 title: String
17 },
18 data: () => ({
19 users: []
20 }),
21 mounted() {
22 axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
23 this.users = res.data
24 })
25 }
26 }
27</script>
28
29<style scoped>
30 h1 {
31 color: black;
32 font-size: 24px;
33 font-weight: 200;
34 padding: 0px 10px 0px;
35 }
36 ul li {
37 list-style: none;
38 color: black;
39 font-weight: 400;
40 opacity: 0.8;
41 font-size: 18px;
42 }
43</style>