[英]Where is number 2 coming from and why classlist is not define
我目前被困在 2 個錯誤上。 我只是不明白為什么沒有定義 Classlist 以及 2 來自哪里。 感謝您抽出寶貴時間幫助我。
錯誤 1:“[Vue 警告]:v-on 處理程序中的錯誤:'TypeError:無法讀取 null 的屬性(讀取 'classList')'
在發現
--->
錯誤2:渲染錯誤:'TypeError:無法讀取未定義的屬性(讀取'2')'
在發現
---> "
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: {
},
});
您在“答案”、“結果”中采用類列表的屬性是 Null。 定義數字 2 可能是 2 處的正確答案值
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.