Vue组件报错求助：classList读取失败与读取undefined的'2'问题

错误1：TypeError: Cannot read properties of null (reading 'classList') #

问题原因 #

1. DOM选择器匹配错误：selectAnswer方法中用document.querySelectorAll('.answers span')查找答案元素，但模板里的答案span类名是answer（单数），且没有父容器带answers类，导致该选择器返回空；同时全局用document.querySelector('.next-btn')查找按钮，若页面存在多个组件或渲染时机特殊，可能返回null，后续操作其classList时触发报错。
2. 变量名误用：backBtn方法里错误使用this.question和this.answer，但组件data中对应的变量是currentQuestion和answered，点击BACK按钮时会执行无效逻辑，间接引发后续DOM操作异常。

修复方案 #

• 把全局DOM查找改为组件内范围查找，用this.$el限定查找范围：

  selectAnswer: function(a) {
      var choice = a.currentTarget,
          answers = this.$el.querySelectorAll('.answer'), // 修正为.answer类
          nextBtn = this.$el.querySelector('.next-btn'); // 改为组件内查找
      
      answers.forEach(answer => {
        answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
      });
      
      choice.classList.add('selected');
      
      this.questions[this.currentQuestion].selected = choice.dataset.index;
      nextBtn.removeAttribute('disabled');
  },
  

• 修正backBtn方法的变量名：

  backBtn:function () {
    if (this.currentQuestion > 0) {
      this.currentQuestion = this.currentQuestion - 1;
      this.answered = this.answered - 1;
    }
  },
  

错误2：TypeError: Cannot read properties of undefined (reading '2') #

问题原因 #

在nextBtn方法的错题收集逻辑中，错误将原question对象的answer数组（单数属性）赋值为temp.answers（复数）：

temp.answers = question.answers; // 原question只有answer属性，answers为undefined

渲染错题列表时，模板中访问question.answers[question.selected]，此时question.answers是undefined，读取索引2（即报错中的属性'2'）时触发空引用错误。

修复方案 #

1. 修正错题对象的属性赋值：

   let temp = {};
   temp.answer = question.answer; // 改为匹配原属性名answer
   temp.question = question.question;
   temp.correct_answer = question.correct_answer;
   temp.selected = question.selected;
   

2. 同步修改模板中错题的渲染路径：

   <span class="selected">{{ question.answer[question.selected] }}</span> 
   <span class="correct">{{ question.answer[question.correct_answer] }}</span>
   

额外优化建议 #

1. 避免methods中使用箭头函数：calculateResult用箭头函数会导致this指向错误，改为普通函数并初始化变量：

   calculateResult: function(questions) {
     var correct = 0;
     for(var i=0; i< questions.length; i++) {
       if(this.questions[i].selected == questions[i].correct_answer) {
         correct++;
       }
     }
     return (correct / questions.length) * 100;
   },
   

2. 用Vue响应式class绑定替代原生DOM操作：比如答案选中状态，通过绑定data中的值实现，更符合Vue逻辑：
   模板修改：

   <span class="answer" 
         v-for="(answer, index) in questions[currentQuestion].answer" 
         :key="index" 
         :class="{ selected: index == questions[currentQuestion].selected }"
         @click="selectAnswer(index)">
     {{ answer }}
   </span>
   

   简化selectAnswer方法：

   selectAnswer: function(index) {
     this.questions[this.currentQuestion].selected = index;
     const nextBtn = this.$el.querySelector('.next-btn');
     nextBtn.removeAttribute('disabled');
   },
   

内容的提问来源于stack exchange，提问作者James Pumkin