测验Vue.js中的混合答案顺序

Question

是否可以在Vue.js中混合答案的顺序？现在设置第一个答案是正确的，两个错误的答案是第二个和第三个。有什么解决方案吗？

HTML:

<input placeholder="Question..." v-model="questionIn" type="text" />
<br />
<input placeholder="Right Answer..." v-model="answercorrectIn" type="text" />
<br />
<input placeholder="Bad Answer..." v-model="answerfalse1In" type="text" />
<br />
<input placeholder="Bad Answer..." v-model="answerfalse2In" type="text" />
<br />

这是JS Vue:

addQuestion()
{
if ((this.questionIn != "") && (this.answercorrectIn != "") && (this.answerfalse1In != "") && (this.answerfalse2In != ""))
{
this.questions.push(
{
question: this.questionIn,
answers:
[
{ id: 0, answer: this.answercorrectIn, correct: false },
{ id: 1, answer: this.answerfalse1In, correct: false },
{ id: 2, answer: this.answerfalse2In, correct: false }
],
correct: [0],
false: [1, 2],

Answer 1

您可以在addQuestion():中打乱答案

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = array[i]
array[i] = array[j]
array[j] = temp
}
}
export default {
methods: {
addQuestion() {
if (/* ok to add */) {
this.questions.push({
question: this.questionIn,
answers: shuffleArray([
{ id: 0, answer: this.answercorrectIn, correct: false },
{ id: 1, answer: this.answerfalse1In, correct: false },
{ id: 2, answer: this.answerfalse2In, correct: false }
]),
correct: [0],
false: [1, 2],
})
}
}
}
}

演示

Answer 2

请参阅此"打乱答案"；在一个非常好的vue.js教程中，她使用lodash-shuffle函数实现了您所需要的东西。

您可以看到这样一个功能的完整实现，以及您应该处理的所有案例。