Nuxt/examples/custom-routes/pages/index.vue

45 lines
788 B
Vue
Raw Normal View History

<template>
<div class="container">
2016-12-19 19:35:34 +00:00
<h2>Users</h2>
<ul class="users">
2017-11-26 13:40:57 +00:00
<li v-for="user in users" :key="user.id">
2016-12-19 19:35:34 +00:00
<nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
</li>
</ul>
</div>
</template>
2016-12-19 19:35:34 +00:00
<script>
import axios from 'axios'
export default {
2017-10-31 13:43:55 +00:00
async asyncData() {
2017-07-08 16:52:29 +00:00
const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
return { users: data }
2016-12-19 19:35:34 +00:00
}
}
</script>
<style scoped>
.container {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
.users {
list-style-type: none;
}
.users li a {
display: inline-block;
width: 200px;
border: 1px #ddd solid;
padding: 10px;
text-align: left;
color: #222;
text-decoration: none;
}
.users li a:hover {
color: orange;
}
</style>