Nuxt/examples/custom-routes/pages/users/_id.vue

38 lines
741 B
Vue
Raw Normal View History

<template>
2016-12-11 15:40:18 +00:00
<div class="container">
<h2>User</h2>
2016-12-11 16:10:35 +00:00
<h3>{{ user.name }}</h3>
<h4>@{{ user.username }}</h4>
<p>Email : {{ user.email }}</p>
2016-12-11 15:40:18 +00:00
<p><router-link to="/users">List of users</router-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data ({ params, error }) {
2016-11-27 18:26:42 +00:00
return axios.get(`https://jsonplaceholder.typicode.com/users/${params.id}`)
2016-12-11 16:10:35 +00:00
.then((res) => { return { user: res.data } })
.catch(() => {
error({ message: 'User not found', statusCode: 404 })
})
}
}
</script>
<style scoped>
2016-12-11 15:40:18 +00:00
.container
{
text-align: center;
overflow: hidden;
2016-12-11 16:10:35 +00:00
min-height: 440px;
2016-12-11 15:40:18 +00:00
}
/*.user {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
2016-12-11 15:40:18 +00:00
}*/
</style>