2017-02-25 03:37:05 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<table class="table table-bordered">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Avatar</th>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>Title</th>
|
|
|
|
<th>Profile</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2017-11-26 13:40:57 +00:00
|
|
|
<tr v-for="(user, key) in users" :key="key">
|
2017-02-25 03:37:05 +00:00
|
|
|
<td>
|
2018-11-24 18:49:19 +00:00
|
|
|
<NuxtLink :to="{ path: `/users/${key}`}">
|
2017-02-25 03:37:05 +00:00
|
|
|
<img :src="user.avatar" class="rounded" alt="avatar">
|
2018-11-24 18:49:19 +00:00
|
|
|
</NuxtLink>
|
2017-02-25 03:37:05 +00:00
|
|
|
</td>
|
|
|
|
<td>{{ user.name }}</td>
|
|
|
|
<td>{{ user.title }}</td>
|
|
|
|
<td>
|
2018-11-24 18:49:19 +00:00
|
|
|
<NuxtLink :to="{ path: `/users/${key}`}">
|
|
|
|
View profile →
|
|
|
|
</NuxtLink>
|
2017-02-25 03:37:05 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2017-10-19 09:25:19 +00:00
|
|
|
import axios from '~/plugins/axios'
|
2017-02-25 03:37:05 +00:00
|
|
|
|
|
|
|
export default {
|
2017-10-31 13:43:55 +00:00
|
|
|
async asyncData() {
|
2017-10-19 09:25:19 +00:00
|
|
|
const { data: users } = await axios.get('users.json')
|
|
|
|
return { users }
|
2017-02-25 03:37:05 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|