我正在使用 Vue 3 和 Bootstrap 4 構建一個測驗應用程式。
我有這種方法來檢查點擊的答案是否是（與正確答案相同的）：
checkAnswer(answer) {
return answer == this.results[this.questionCount]["correct_answer"];
}
它應該在單擊串列項時執行，如下所示：
<li v-for="answer in answers" @click="checkAnswer(answer)" :class="{'text-white bg-success' : checkAnswer(answer)}">{{answer}}</li>
如果點擊的答案是正確的，串列項應該添加類text-white bg-success，否則應該添加text-white bg-danger。
const quizApp = {
data() {
return {
questionCount: 0,
results: [
{
question: "The book "The Little Prince" was written by...",
correct_answer: "Antoine de Saint-Exupéry",
incorrect_answers: [
"Miguel de Cervantes Saavedra",
"Jane Austen",
"F. Scott Fitzgerald"
]
},
{
question:
"Which novel by John Grisham was conceived on a road trip to Florida while thinking about stolen books with his wife?",
correct_answer: "Camino Island",
incorrect_answers: ["Rogue Lawyer", "Gray Mountain", "The Litigators"]
},
{
question:
"In Terry Pratchett's Discworld novel 'Wyrd Sisters', which of these are not one of the three main witches?",
correct_answer: "Winny Hathersham",
incorrect_answers: [
"Granny Weatherwax",
"Nanny Ogg",
"Magrat Garlick"
]
}
]
};
},
methods: {
nextQuestion() {
if (this.questionCount < this.results.length - 1) {
this.questionCount ;
}
},
prevQuestion() {
if (this.questionCount >= 1) {
this.questionCount--;
}
},
checkAnswer(answer) {
// check if the clicked anwser is equal to the correct answer
return answer == this.results[this.questionCount]["correct_answer"];
},
shuffle(arr) {
var len = arr.length;
var d = len;
var array = [];
var k, i;
for (i = 0; i < d; i ) {
k = Math.floor(Math.random() * len);
array.push(arr[k]);
arr.splice(k, 1);
len = arr.length;
}
for (i = 0; i < d; i ) {
arr[i] = array[i];
}
return arr;
}
},
computed: {
answers() {
let incorrectAnswers = this.results[this.questionCount][
"incorrect_answers"
];
let correctAnswer = this.results[this.questionCount]["correct_answer"];
// return all answers, shuffled
return this.shuffle(incorrectAnswers.concat(correctAnswer));
}
}
};
Vue.createApp(quizApp).mount("#quiz_app");#quiz_app {
height: 100vh;
}
.container {
flex: 1;
}
.quetions .card-header {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.quetions .card-footer {
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.answers li {
cursor: pointer;
display: block;
padding: 7px 15px;
margin-bottom: 5px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
}
.answers li:last-child {
margin-bottom: 0;
}
.answers li:hover {
background: #fafafa;
}
.pager {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.pager li > a {
display: inline-block;
padding: 5px 10px;
text-align: center;
width: 100px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 999px;
text-decoration: none !important;
color: #fff;
}
.pager li > a.disabled {
pointer-events: none;
background-color: #9d9d9d !important;
}
.logo {
width: 30px;
}
.nav-item {
width: 100%;
}
.card {
width: 100%;
}
@media (min-width: 768px) {
.nav-item {
width: auto;
}
.card {
width: 67%;
}
}
@media (min-width: 992px) {
.card {
width: 50%;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<div id="quiz_app" class="container quetions d-flex align-items-center justify-content-center my-3">
<div v-if="results.length" class="card shadow-sm">
<div class="card-header bg-light h6">
{{results[questionCount]['question']}}
</div>
<div class="card-body">
<ul class="answers list-unstyled m-0">
<li v-for="answer in answers" @click="checkAnswer(answer)" :class="{'text-white bg-success' : checkAnswer(answer)}">{{answer}}</li>
</ul>
</div>
<div class="card-footer bg-white">
<ul class="pager">
<li><a href="#" @click="prevQuestion" class="bg-dark" :class="{'disabled' : questionCount == 0}">Previous</a></li>
<li class="d-flex align-items-center text-secondary font-weight-bold small">Question {{questionCount 1}} of {{results.length}}</li>
<li><a href="#" class="bg-dark" :class="{'disabled' : questionCount == results.length - 1}" @click="nextQuestion">Next</a></li>
</ul>
</div>
</div>
</div>問題
令我驚訝的是，該checkAnswer(answer)方法在任何點擊之前（并且沒有）執行。
題
我究竟做錯了什么？
uj5u.com熱心網友回復：
更新
checkAnswer() 如果在處理程式之外使用，則立即呼叫。
也許這會有所幫助，當checkAnswer()被呼叫時，存盤所選答案selectedAnswer并檢查答案是否正確isCorrect，并使用這兩種狀態來比較回圈答案。
<li
v-for="answer in answers"
:key="answer"
@click="checkAnswer(answer)"
:class="{
'text-white bg-success' : (selectedAnswer === answer && isCorrect),
'text-white bg-danger' : (selectedAnswer === answer && !isCorrect)
}"
>
{{answer}}
</li>
data() {
return {
isCorrect: false,
selectedAnswer: ''
...
}
},
methods: {
checkAnswer(answer) {
// check if the clicked anwser is equal to the correct answer
this.selectedAnswer = answer
if (answer == this.results[this.questionCount]["correct_answer"]) {
this.isCorrect = true
} else {
this.isCorrect = false
}
},
}
https://jsfiddle.net/renzivan15/fw10q5og/12/
uj5u.com熱心網友回復：
這是在單擊之前執行它：
:。
您需要將每個答案的狀態保存在一個變數中，并在方法中更新它。并且作為側節點，推薦使用:keyfor回圈元素。
uj5u.com熱心網友回復：
問題是checkAnswer在 html 模板中參考了 ，因此它將在渲染時立即執行。您可能想嘗試將類設定為某個計算屬性而不是函式。
<li v-for="answer in answers" @click="checkAnswer(answer)" :class="{'text-white bg-success' : checkAnswer(answer)}">{{answer}}</li>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370601.html
上一篇：如何有效地從樹結構構建一棵樹