运行功能后获取的ID未定义

Question

我正在尝试从组中删除项目，如果没有剩余项目，则会自动删除该组。当我这样做时，该函数成功运行，但是vue给了我这个错误，提示未定义id。

基本上我不确定为什么要尝试获取一个ID以执行任何操作，它应该已经完成​​。

如果我手动删除一个组，只有在数组中还有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)

我目前正在检查一组学生，并通过id onclick将其删除，然后如果一个组中没有任何学生，则将该组从组列表中删除。

我不确定为什么未定义id，因为在选择学生之前该函数不会再次运行

这是我的方法。

 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

在您的for循环中使用index数组以避免混淆，并将拼接调用放在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数组，这将在for循环的结尾导致错误。