получение идентификатора не определено после запуска функции

Question

Я пытаюсь удалить элементы из группы и автоматически удалить группу, если ничего не осталось. Когда я выполняю функцию, она успешно работает, но vue выдает мне эту ошибку, говоря, что идентификатор не определен.

В основном я не уверен, почему он пытается захватить идентификатор для выполнения чего-либо, это уже должно быть завершено. .

эта ошибка не возникает, если я вручную удаляю группу, только если в массиве осталось 0 элементов, а группа удаляется.

может быть, это проблема времени выполнения? Я не слишком уверен.

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)

В настоящее время я проверяю массив студентов и удаляю их по идентификатору onclick, а затем, если в группе не осталось никого, группа удаляется из списка групп.

Я не уверен, почему идентификатор не определен, так как эта функция не запускается снова, пока я не выберу ученика

вот мой метод.

 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)
                            }
                        }                        
                    },

и вот удалить метод группы исключения, который запускается, если не осталось ни одного студента, и мы можем удалить группу

  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')
                    },

Answer 1

Используйте массив index в вашем для l oop, чтобы избежать путаницы и поместите вызов соединения в конец блока for:

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

  for (var i = index.length - 1; i >= 0; i--){
    console.log(index[i])

    if(index === undefined || index.length === 0){
      console.log('running remove')
      this.removeExclusionGroup(groupID)
    }
    if( index[i].id === studentID){
      index.splice(i,1)
    }
  }                        
},

Я думаю, что вы индексируете в index массив после объединения, и это то, что вызовет ошибку в конце для l oop.