nested data example update

examples/custom-routes/pages/users.vue

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

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

@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <h2>User</h2>
-    <h3>{{ name }}</h3>
+    <h3>{{ user.name }}</h3>
-    <h4>@{{ username }}</h4>
+    <h4>@{{ user.username }}</h4>
-    <p>Email : {{ email }}</p>
+    <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;