diff --git a/2021-03-27_routing-01-starting-setup/src/components/teams/TeamMembers.vue b/2021-03-27_routing-01-starting-setup/src/components/teams/TeamMembers.vue index 6537a7a..141c7b2 100644 --- a/2021-03-27_routing-01-starting-setup/src/components/teams/TeamMembers.vue +++ b/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; } }; diff --git a/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue b/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue index d6708ac..d99f6d3 100644 --- a/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue +++ b/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue @@ -2,13 +2,13 @@