Garmaine Staff asked 2 years ago

I'm trying to remove items from a group and automatically delete the group if no items are left. When I do the function runs successfully but vue gives me this error saying that id is not defined.

basically i'm not sure why it's trying to grab an id to execute anything, it should already be finished.

this error doesn't happen if I manually delete a group, only if there are 0 items left in the array and the group deletes.

maybe this is a runtime problem? I'm not too sure.

vue.js:634 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'id' of undefined"

(found in <Root>)
warn @ vue.js:634
logError @ vue.js:1893
globalHandleError @ vue.js:1888
handleError @ vue.js:1848
invokeWithErrorHandling @ vue.js:1871
invoker @ vue.js:2188
original._wrapper @ vue.js:7547
vue.js:1897 TypeError: Cannot read property 'id' of undefined
    at Vue.leaveExclusionGroup (index.html:764)
    at click (eval at createFunction (vue.js:11649), <anonymous>:3:4956)
    at invokeWithErrorHandling (vue.js:1863)
    at HTMLSpanElement.invoker (vue.js:2188)
    at HTMLSpanElement.original._wrapper (vue.js:7547)

I am currently checking an array of students and removing them by id onclick, then if none are left in a group the group gets removed from the list of groups.

I'm not sure why id is undefined as this function does not run again until I select a student

here is my method.

 leaveExclusionGroup: function(groupID, studentID){
                        //console.log(groupID, studentID)
                        let index = this.exclusionGroups[groupID-1].students //this is an array

                        for(var i = 0; i< this.exclusionGroups[groupID-1].students.length; i++){
                            console.log(index[i])
                            if( index[i].id === studentID){
                                index.splice(i,1)
                            }

                            if(this.exclusionGroups[groupID-1].students === undefined || this.exclusionGroups[groupID-1].students.length === 0){
                                console.log('running remove')
                                this.removeExclusionGroup(groupID)
                            }
                        }                        
                    },

and here is the remove Exclusion group method that runs if there aren't any students left and we can remove the group

  removeExclusionGroup: function(id){

                   console.log(id)
                   for(var i = this.exclusionGroups.length - 1; i >= 0; i--) {
                        if(this.exclusionGroups[i].id === id) {
                            this.exclusionGroups.splice(i, 1);
                            console.log(this.exclusionGroups)
                            }
                        }  
                        this.isHidden = false      
                    },

                    displayModal: function(){
                        $('#myModal').modal('show')
                    },