如何在嵌套的v-for循环中存储单选输入字段

Question

我想将输入数据存储在嵌套的v-for中问题是当我得到第二个v-for索引时索引号不是唯一的，下面的代码是我嵌套的v-for循环第一个循环用于获取问题，第二个循环用于获取答案

<div
v-for="(exam, index) in FilteredExams[0].Questions"
v-show="index < this.stageNumber"
:class="{
dspnone:
DspLastItem &&
index < this.stageNumber - this.StageOnChange,
}"
:key="index + RandomKey()"
class="flex flex-col gap-5"
>
<!-- questions -->
<p class="text-secondary-600 font-bold">{{ exam.question }}</p>
<!-- ----- answers ------ -->
<div
v-for="(exam, index) in FilteredExams[0].Questions[index].Answers"
:key="index + RandomKey()"
class="flex gap-3 items-center"
>
<input
type="radio"
:name="index !== 0 ? 'answer' +  this.RadioNumber : ++this.RadioNumber && 'answer' + this.RadioNumber"
:value="exam.answer"
v-model="ExamAnswers[index]"
/>
<label class="text-sm text-secondary-600">
{{ exam.answer }}
</label>
</div>
</div>

下面的代码是我的数据段:

data() {
return {
DspLastItem: false,
stageNumber: null,
StageOnChange: null,
StageCount: null,
RadioNumber: 1,
StepCount: [],
exams: [],
FilteredExams: [],
errors: [],
ExamAnswers: [], 
};

},

这是我的API数据

[
{
"ExamTitle": "تست شخصیت",
"ExamImage": {
"url": "http://localhost/wp-content/uploads/2022/06/personalitytest.png",
"id": "27",
"width": "217",
"height": "232",
"thumbnail": "http://localhost/wp-content/uploads/2022/06/personalitytest.png",
"alt": "",
"title": "personalitytest",
"description": ""
},
"ExamDesc": "در حدود ۴۶۰ سال قبل از میلاد مسیح، بقراط اظهار داشت که انسان ها دارای شخصیت هستند، شخصیتی که از چهار حالت متمایز تشکیل شده است. وی گفت که هر ویژگی که در افراد حاکم تر باشد، حالت آن ها و در نتیجه شخصیت منحصر به فرد آن ها را تعیین می کند.",
"Questions": [
{
"question": "آیا ترجیح می دهید زندگی تان سرشار از تغییر باشد؟",
"MainAnswer": "بله",
"Answers": [
{
"answer": "نمیدانم ",
"AnswerWeight": "10"
},
{
"answer": "بله",
"AnswerWeight": "20"
},
{
"answer": "خیر",
"AnswerWeight": "5"
}
]
},
{
"question": "آیا شخص جاه طلبی هستید؟",
"MainAnswer": "بله",
"Answers": [
{
"answer": "بله",
"AnswerWeight": "20"
},
{
"answer": "نمیدانم",
"AnswerWeight": "30"
},
{
"answer": "خیر ",
"AnswerWeight": "15"
},
{
"answer": "مطمین نیستم",
"AnswerWeight": "30"
}
]
},
{
"question": "چه میزان به زندگی امیدوار هستید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "چرا دلیل سکته های قلبی زیاد است",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا آب و هوایی با دمای یکنواخت را ترجیح می دهید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا دوست دارید ورزش های خشن را در تلویزیون تماشا کنید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا هیچ وقت تمایل داشته اید کسی را بکشید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "اگر در کمیته ای عضو باشید، آیا دوست دارید ریاست آن را به عهده بگیرید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا حاضرید داروهایی را مصرف کنید که موجب توهم می شوند؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا آن قدر از دست بقیه عصبانی می شوید که سرشان داد بزنید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا مشارکت خلاقی در جامعه خود دارید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
},
{
"question": "آیا از کار خود لذت می برید؟",
"MainAnswer": "زیاد",
"Answers": [
{
"answer": "بسیار کم",
"AnswerWeight": "5"
},
{
"answer": "بسیار زیاد",
"AnswerWeight": "10"
},
{
"answer": "خیلی زیاد",
"AnswerWeight": "20"
},
{
"answer": "در حد عالی ",
"AnswerWeight": "50"
},
{
"answer": "بیش از 90 درصد",
"AnswerWeight": "100"
}
]
}
],
"MinNumberToDown": "5",
"MinNumberToDownMsg": "شخصت شما غیر عادی است",
"MinNumber": "10",
"MaxNumber": "20",
"MinToMaxMsg": "شخصیت شما نرمال است",
"MaxNumberToUp": "20",
"MaxNumberToUpMsg": "شخصیت شما فوق العاده است"
}

)

我怎样才能解决这个问题?

Answer 1

您需要重命名index变量的内部实例，以便能够将它们彼此区分开来。例如innerIndex。

下面是我的意思的一个例子:

<div
v-for="(exam, index) in FilteredExams[0].Questions"
v-show="index < this.stageNumber"
:class="{
dspnone:
DspLastItem &&
index < this.stageNumber - this.StageOnChange,
}"
:key="index + RandomKey()"
class="flex flex-col gap-5"
>
<!-- questions -->
<p class="text-secondary-600 font-bold">{{ exam.question }}</p>
<!-- ----- answers ------ -->
<div
v-for="(exam, innerIndex) in FilteredExams[0].Questions[index].Answers"
:key="innerIndex + RandomKey()"
class="flex gap-3 items-center"
>
<input
type="radio"
:name="index !== 0 ? 'answer' +  this.RadioNumber : ++this.RadioNumber && 'answer' + this.RadioNumber"
:value="exam.answer"
v-model="ExamAnswers[index]"
/>
<label class="text-sm text-secondary-600"> {{ exam.answer }} </label>
</div>
</div>

应该可以了。请注意，我只是在内部v-for的解构参数和下面的:key绑定中将index更改为innerIndex。

在你方样品中还有更多可以简化和更清楚的地方，但这超出了这个问题。