nested data example update

This commit is contained in:
Alexandre Chopin 2016-12-11 17:10:35 +01:00
parent 1ee4f9c40e
commit ae2bf10221
2 changed files with 18 additions and 5 deletions

View File

@ -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>

View File

@ -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;