2 号来自哪里以及为什么没有定义类列表

Question

I'm currently stuck on 2 Errors. I just don't understand why Classlist is not defined and where's that 2 coming from. Thank you for taking the time and help me.
Error-1: "[Vue warn]: Error in v-on handler: 'TypeError: Cannot read properties of null (reading 'classList')'

found in

--->
Error-2: Error in render: 'TypeError: Cannot read properties of undefined (reading '2')'

found in

---> "

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<div id="app1">
  <display-question></display-question>
</div>   

Js

Vue.component('display-question',{
   data: function(){
     return{
       showWrongQuestion: false,
       wrongQuestions: [],
       temp: [],
       currentQuestion: 0,
       answered: 0,
       wrongAnswers: 0,
       correctAnswers: 0,
    questions: [
             {
             question: 'What is the capital of Ukrain ?',
             answer: [
                 'Kyiv',
                 ' Kabul',
                 ' Buenos Aires',
                 ' Praia'
             ],
             correct_answer: 0,
             selected: null,
             sense: 0
             },
             {
             question: 'When was Queen Elizabeth II death ?',
             answer: [
                 '11/09/2022',
                 '08/09/2022',
                 '12/08/2022',
                 '07/09/2022'
             ],
             correct_answer: 1,
             selected: null,
             sense: 0
             },
          {
             question: 'How many bones are there in human body?',
             answer: [
                 '206',
                 '186',
                 '209',
                 '190'
             ],
             correct_answer: 0,
             selected: null,
             sense: 0
             },
          {
             question: 'Who were the 30th president of ?',
             answer: [
                 'Julia Eileen Gillard',
                 'John Winston Howard ',
                 ' Scott John Morrison ',
                 'Anthony Albanese,'
             ],
             correct_answer: 2,
             selected: null,
             sense: 0
             },
          {
             question: 'What is the biggest continent?',
             answer: [
                 'Oceania',
                 'Europe',
                 'Asia',
                 'Africa'
             ],
             correct_answer: 2,
             selected: null,
             sense: 0
             }
         ],
   }},
   
   methods: {
       selectAnswer: function(a) {
           var choice = a.currentTarget,
               answers = document.querySelectorAll('.answers span'),
               nextBtn = document.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:function () {
       if (this.question > 0) {
         this.question = this.question - 1;
         this.answered = this.answer -1;
       }
     },
     //Next button Function
     nextBtn: function() {
       this.answered < this.questions.length ? this.answered++ : ''; 
       var nextbutton = this.$el.querySelector('.next-btn'),
     
       answers = this.$el.querySelectorAll('.answers span'),
       questionsLength = this.questions.length,
       result = this.$el.querySelector('.result'),
       question = this.$el.querySelector('.question');
       
      if(!nextbutton.hasAttribute('disabled') && this.currentQuestion < (questionsLength -1)) {    
         this.currentQuestion++;
         
         answers.forEach(answer => {
           answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
         });
     nextbutton.setAttribute('disabled', '');   
       } 
       else if(this.currentQuestion >= (questionsLength -1)) {
         
         this.questions.forEach( (question) => {
           if(question.selected == question.correct_answer && question.sense ==0) {
             
             this.correctAnswers++;
             question.sense = 1;
             
           } else if(question.selected != question.correct_answer && question.sense ==0) {
             
             this.wrongAnswers++;
             question.sense = 1;
             let temp = {};
             temp.answers = question.answers;
             temp.question = question.question;
             temp.correct_answer = question.correct_answer;
             temp.selected = question.selected;
             
             this.wrongQuestions.push(temp);
           }
         });
     result.classList.add('active');
         question.classList.add('blur');
       } 
     },
    //calculate result
      calculateResult: (questions) => {
       var correct;
       for(var i=0; i< questions.length; i++) {
         this.questions[i].selected == questions[i].correct ?  correct++ : '';
       }
 return (correct / questions.length) * 100;
     },
     
   },       
   mounted() {
     var nextbutton = this.$el.querySelector('.next-btn'),
         wrongAnswersBtn = this.$el.querySelector('.show-wrong-ones'),
         backbutton = this.$el.querySelector('.back-Btn'),
         answers = this.$el.querySelectorAll('.answers span'),
         questionsLength = this.questions.length,
         result = this.$el.querySelector('.result'),
         question = this.$el.querySelector('.question'),
         closeResult = this.$el.querySelector('.result button.close'),
         wrongQuestions = this.$el.querySelector('.wrong-questions'),
         showMyResults = this.$el.querySelector('#return-to-result'); 
    //close result
   closeResult.addEventListener('click', () => {
     result.classList.remove('active');
     question.classList.remove('blur');
   });
   //show wrong answer
   wrongAnswersBtn.addEventListener('click', () => {      
     result.classList.remove('active');
     wrongQuestions.classList.add('active');
   });
   //show result
   showMyResults.addEventListener('click', () => {
     result.classList.add('active');
     wrongQuestions.classList.remove('active');
     
   }) 
  
     
 },
   template: '<div><h2>{{questions[currentQuestion].question }}</h2></br><span class=answer v-for="(answer, index) in questions[currentQuestion].answer" :key="index" v-bind:data-index="index" @click="selectAnswer">{{ answer }}</span><p><button class="backBtn" v-on:click="backBtn">BACK</button><button class="next-btn" disabled v-on:click="nextBtn"> {{ currentQuestion < (questions.length -1) ? "Next" : "Result!" }} </button></p><div class="result"><div class="success"></div> <h2>Your score is:</h2><h1 :class="[(Number(((correctAnswers / questions.length) *100)).toFixed(2) >= 50)]">{{ Number(((correctAnswers / questions.length) *100)).toFixed(2) }}%</h1><small><b>{{ correctAnswers }}</b>Correct, <b>{{ wrongAnswers }}</b>Wrong</small><button class="close">close</button><button class="show-wrong-ones" v-show= "wrongAnswers > 0" @click="showWrongQuestion = true">Wrong answers</button></div> <div class="wrong-questions"> <h2 v-if="wrongQuestions.length > 1">Your wrong Questions</h2> <h2 v-else-if="wrongQuestions.length == 1">Your wrong Question</h2><div class="wrong-one" v-for="question in wrongQuestions"><h3>{{ question.question }}</h3><div class="answers-container"><span class="selected">{{ question.answers[question.selected] }}</span> <span class="correct">{{ question.answers[question.correct_answer] }}</span></div></div><button id="return-to-result">Show my result</button></div></div>',
 })


 var test1 = new Vue({
   el: "#app1",
   data: {
   },
 });
 
 

Answer 1

Your properties that take classlist are Null in 'answer', 'result'. Define The number 2 is maybe the correct answer value at 2