various changes

2021-03-27_routing-01-starting-setup/src/components/teams/TeamMembers.vue

@@ -17,6 +17,7 @@ import UserItem from '../users/UserItem.vue';
 
 export default {
   inject: ['teams', 'users'],
+  props: ['teamId'],
   components: {
     UserItem
   },
@@ -26,17 +27,26 @@ export default {
       members: []
     };
   },
-  created() {
-    const teamId = this.$route.params.teamId;
-    const selectedTeam = this.teams.find(team => team.id === teamId);
-    const members = selectedTeam.members;
-    const selectedMembers = [];
-    for (const member of members) {
-      const selectedUser = this.users.find(user => user.id === member);
-      selectedMembers.push(selectedUser);
+  methods: {
+    loadTeamMembers(teamId) {
+      const selectedTeam = this.teams.find(team => team.id === teamId);
+      const members = selectedTeam.members;
+      const selectedMembers = [];
+      for (const member of members) {
+        const selectedUser = this.users.find(user => user.id === member);
+        selectedMembers.push(selectedUser);
+      }
+      this.members = selectedMembers;
+      this.teamName = selectedTeam.name;
+    }
+  },
+  created() {
+    this.loadTeamMembers(this.teamId);
+  },
+  watch: {
+    teamId(newId) {
+      this.loadTeamMembers(newId);
     }
-    this.members = selectedMembers;
-    this.teamName = selectedTeam.name;
   }
 };
 </script>

2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue

@@ -2,13 +2,13 @@
   <li>
     <h3>{{ name }}</h3>
     <div class="team-members">{{ memberCount }} Members</div>
-    <a href="#">View Members</a>
+    <router-link :to="'/teams/' + id">View Members</router-link>
   </li>
 </template>
 
 <script>
 export default {
-  props: ['name', 'memberCount'],
+  props: ['id', 'name', 'memberCount']
 };
 </script>
 
@@ -41,4 +41,4 @@ a:hover,
 a:active {
   background-color: #220a8d;
 }
-</style>
+</style>

2021-03-27_routing-01-starting-setup/src/components/teams/TeamsList.vue

@@ -3,6 +3,7 @@
     <teams-item
       v-for="team in teams"
       :key="team.id"
+      :id="team.id"
       :name="team.name"
       :member-count="team.members.length"
     ></teams-item>
@@ -14,9 +15,9 @@ import TeamsItem from './TeamsItem.vue';
 
 export default {
   components: {
-    TeamsItem,
+    TeamsItem
   },
-  inject: ['teams'],
+  inject: ['teams']
 };
 </script>
 
@@ -27,4 +28,4 @@ ul {
   max-width: 40rem;
   padding: 0;
 }
-</style>
+</style>

2021-03-27_routing-01-starting-setup/src/main.js

@@ -14,7 +14,7 @@ const router = createRouter({
     { path: '/', component: TeamsList },
     { path: '/teams', component: TeamsList },
     { path: '/users', component: UsersList },
-    { path: '/teams/:teamId', component: TeamMembers }
+    { path: '/teams/:teamId', component: TeamMembers, props: true }
   ]
 });