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

35 lines
677 B
Vue
Raw Normal View History

<template>
2016-12-19 19:35:34 +00:00
<div class="user">
<h3>{{ name }}</h3>
<h4>@{{ username }}</h4>
<p>Email : {{ email }}</p>
<p><nuxt-link to="/">List of users</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
2017-10-31 13:43:55 +00:00
validate({ params }) {
2016-12-19 19:35:34 +00:00
return !isNaN(+params.id)
2016-12-16 16:46:30 +00:00
},
2017-10-31 13:43:55 +00:00
async asyncData({ params, error }) {
2017-07-08 16:52:29 +00:00
try {
const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
return data
} catch (e) {
error({ message: 'User not found', statusCode: 404 })
2017-07-08 16:52:29 +00:00
}
}
}
</script>
<style scoped>
2016-12-19 19:35:34 +00:00
.user {
2016-12-11 15:40:18 +00:00
text-align: center;
2016-12-19 19:35:34 +00:00
margin-top: 100px;
font-family: sans-serif;
2016-12-11 15:40:18 +00:00
}
</style>