[FIXED] how to store radio input field in nested v-for loop

Issue

I want to store input data in a nested v-for the problem is when I get a second v-for index the index number is not unique, the code below is my nested v-for loop first loop is for getting questions and the second loop is for getting answers

       <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>

the code below is my data section:

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

},

this is my API data

[
{
    "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": "شخصیت شما فوق العاده است"
}

]

how can I solve the problem?

Solution

You need to rename the inner instance of the index variable to be able to distinguish them from each other. For instance innerIndex.

Here's a sample of what I mean:

<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>

That should do it. Notice how I've only changed the index to innerIndex in the destructured argument of the inner v-for and in the following :key binding.

There are more that can be simplified and made more clear in your sample, but that is beyond this question.

Answered By - Nikolaj Dam Larsen

Answer Checked By - Marilyn (PHPFixing Volunteer)