From 3cbf849c8e342fd9bc3a57bb046789822bb50c51 Mon Sep 17 00:00:00 2001
From: Ninja <yazjallad@gmail.com>
Date: Fri, 25 Sep 2020 19:15:00 -0700
Subject: [PATCH] Update TeamMemberManager.vue

Add `:key` buildings for list (for) rendering

[https://vuejs.org/v2/guide/list.html](https://vuejs.org/v2/guide/list.html)
---
 .../resources/js/Pages/Teams/TeamMemberManager.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue b/stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue
index 41f66db51..08bd33a8e 100644
--- a/stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue
@@ -36,7 +36,9 @@
                             <div class="px-4 py-3"
                                             :class="{'border-t border-gray-200': i > 0}"
                                             @click="addTeamMemberForm.role = role.key"
-                                            v-for="(role, i) in availableRoles">
+                                            v-for="(role, i) in availableRoles"
+                                            :key="i"
+                                            >
                                 <div :class="{'opacity-50': addTeamMemberForm.role && addTeamMemberForm.role != role.key}">
                                     <!-- Role Name -->
                                     <div class="flex items-center">
@@ -85,7 +87,7 @@
                 <!-- Team Member List -->
                 <template #content>
                     <div class="space-y-6">
-                        <div class="flex items-center justify-between" v-for="user in team.users">
+                        <div class="flex items-center justify-between" v-for="user in team.users" :key="user.id">
                             <div class="flex items-center">
                                 <img class="w-8 h-8 rounded-full" :src="user.profile_photo_url" :alt="user.name">
                                 <div class="ml-4">{{ user.name }}</div>
@@ -94,12 +96,12 @@
                             <div class="flex items-center">
                                 <!-- Manage Team Member Role -->
                                 <button class="ml-2 text-sm text-gray-400 underline"
-                                        v-if="userPermissions.canAddTeamMembers && availableRoles.length > 0"
+                                        v-if="userPermissions.canAddTeamMembers && availableRoles.length"
                                         @click="manageRole(user)">
                                     {{ displayableRole(user.membership.role) }}
                                 </button>
 
-                                <div class="ml-2 text-sm text-gray-400" v-else-if="availableRoles.length > 0">
+                                <div class="ml-2 text-sm text-gray-400" v-else-if="availableRoles.length">
                                     {{ displayableRole(user.membership.role) }}
                                 </div>
 
@@ -135,7 +137,9 @@
                         <div class="px-4 py-3"
                                         :class="{'border-t border-gray-200': i > 0}"
                                         @click="updateRoleForm.role = role.key"
-                                        v-for="(role, i) in availableRoles">
+                                        v-for="(role, i) in availableRoles" 
+                                        :key="i"
+                                        >
                             <div :class="{'opacity-50': updateRoleForm.role && updateRoleForm.role != role.key}">
                                 <!-- Role Name -->
                                 <div class="flex items-center">