diff --git a/resources/js/components/EventAddVolunteerModal.vue b/resources/js/components/EventAddVolunteerModal.vue
index ae2dc6534..306fe2434 100644
--- a/resources/js/components/EventAddVolunteerModal.vue
+++ b/resources/js/components/EventAddVolunteerModal.vue
@@ -49,10 +49,13 @@ export default {
       user: null,
       fullName: null,
       volunteerEmailAddress: null,
-      groupVolunteers: []
+      groupId: null,
     }
   },
   computed: {
+    groupVolunteers() {
+      return this.groupId ? this.$store.getters['volunteers/byGroup'](this.groupId) : []
+    },
     options() {
       const ret = [
         {
@@ -63,7 +66,7 @@ export default {
 
       this.groupVolunteers.forEach((v) => {
         ret.push({
-          value: v.id,
+          value: v.user,
           text: v.name
         })
       })
@@ -110,11 +113,12 @@ export default {
   methods: {
     async show() {
       // Get the list of volunteers.
-      this.$store.dispatch('volunteers/fetchGroup', this.idgroups)
+      const event = await this.$store.dispatch('events/fetch', {
+        id: this.idevents
+      })
 
-      if (ret && ret.data) {
-        this.groupVolunteers = ret.data
-      }
+      this.groupId = event.group.id
+      await this.$store.dispatch('volunteers/fetchGroup', this.groupId)
 
       this.showModal = true
     },