Update TeamMemberManager.vue (#270)

Add `:key` buildings for list (for) rendering [https://vuejs.org/v2/guide/list.html](https://vuejs.org/v2/guide/list.html)
laravel · Sep 27, 2020 · a0da247 · a0da247
1 parent a33dd2f
commit a0da247
Showing 1 changed file with 9 additions and 5 deletions.
diff --git 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">