mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
nested data example update
This commit is contained in:
parent
1ee4f9c40e
commit
ae2bf10221
@ -26,6 +26,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.users {
|
||||
margin: 10px 0;
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
}
|
||||
@ -39,6 +40,9 @@ export default {
|
||||
text-decoration: none;
|
||||
}
|
||||
.users li a:hover {
|
||||
color: orange;
|
||||
color: #41b883;
|
||||
}
|
||||
.router-link-active {
|
||||
color: #41b883 !important;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2>User</h2>
|
||||
<h3>{{ name }}</h3>
|
||||
<h4>@{{ username }}</h4>
|
||||
<p>Email : {{ email }}</p>
|
||||
<h3>{{ user.name }}</h3>
|
||||
<h4>@{{ user.username }}</h4>
|
||||
<p>Email : {{ user.email }}</p>
|
||||
<p><router-link to="/users">List of users</router-link></p>
|
||||
</div>
|
||||
</template>
|
||||
@ -14,10 +14,18 @@ import axios from 'axios'
|
||||
export default {
|
||||
data ({ params, error }) {
|
||||
return axios.get(`https://jsonplaceholder.typicode.com/users/${params.id}`)
|
||||
.then((res) => res.data)
|
||||
.then((res) => { return { user: res.data } })
|
||||
.catch(() => {
|
||||
error({ message: 'User not found', statusCode: 404 })
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
return axios.get(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)
|
||||
.then((res) => {
|
||||
this.user = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -27,6 +35,7 @@ export default {
|
||||
{
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
min-height: 440px;
|
||||
}
|
||||
/*.user {
|
||||
text-align: center;
|
||||
|
Loading…
Reference in New Issue
Block a user