As I attempt to remove items from a group and automatically delete the group if there are no items left, I encounter an error in Vue indicating that 'id' is not defined. This seems puzzling to me because it should have already completed the operation.
The error only appears when the group is deleted due to having 0 items remaining in the array - this doesn't occur if I manually delete a group.
Could this be a runtime issue? I am uncertain about the cause.
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)
The function I am using involves checking an array of students and removing them by their IDs onclick, followed by removing the group from the list of groups if there are none left in the group.
I'm baffled as to why 'id' is coming up as undefined since the function should only run again after selecting a student.
Below is the method being used:
leaveExclusionGroup: function(groupID, studentID){
let index = this.exclusionGroups[groupID-1].students
for(var i = 0; i < this.exclusionGroups[groupID-1].students.length; i++){
if( index[i].id === studentID){
index.splice(i,1)
}
if(this.exclusionGroups[groupID-1].students === undefined || this.exclusionGroups[groupID-1].students.length === 0){
this.removeExclusionGroup(groupID)
}
}
},
Here is the method for removing an exclusion group once all students are removed:
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')
},