0

I can console.log (inside the method) the 'newQuestion' object/'answers' array with no issue but when running the app I am met with the "cannot read properties of undefined" error. The weirdest part is that it actually displays the information on the page (it works I guess?) but the error isn't going away for some reason.

Template html code

<h2>Questions</h2>
    <div class="quiz" :key="currentQuestionIndex">
      <h2>{{ questions[currentQuestionIndex].text }}</h2>
      <div class="answers-container">
        <div
          class="answer answer--option"
          v-for="(answer, index) in questions[currentQuestionIndex].answers"
          @click="selectAnswer(index)"
          :class="{
            'is-selected': chosenAnswers[currentQuestionIndex] == index,
          }"
          :key="index"
        >
          {{ answer.text }}
        </div>
      </div>

generateQuestions() method code:

generateQuestions(response) {
      if (response.length > 0) {
        response.forEach((questionData) => {
          const newQuestion = {}; // Question object
          const answers = []; // Answers array

          [
            ...questionData.incorrect_answers, //Establish params from api
            questionData.correct_answer,
          ].forEach((answer) => {
            let answerObject = { text: "", correct: false }; // Two properties to each answer

            [answerObject.text, answerObject.correct] = [
              answer,
              answer == questionData.correct_answer, // Assign correct answer
            ];
            answers.push(answerObject);
          });

          newQuestion.text = questionData.question;
          newQuestion.answers = answers;
          this.questions.push(newQuestion); // Push newQuestion object to questions array in data
        });
      } else {
        alert("something went wrong");
      }

I have been console.logging every step of the process to find any discrepancies but none where found. I should mention it isn't just returning this error for the 'text' property. It also happens for 'answers' etc. I can add more code if needed or relevant to solving issue.

3
  • an idea but to verify like the generation of question is async first time html is loaded the questions are not loaded and the code inside the h2 generate the error could you try somethuing like questions[currentQuestionIndex]?.text in the h2 Commented Jul 15, 2024 at 12:05
  • It's not shown where generateQuestions is called. Proceed from the fact that questions[currentQuestionIndex] can be undefined on initial render. Use v-if or ?. as suggested Commented Jul 15, 2024 at 12:35
  • 1
    Does not solve your problem, but nonetheless: The line that creates the let-binding to answerObject, followed by a line where you use array-destructuring to assign values to the properties text and correct is rather strange. Why don't you assign the values when the binding is established: let answerObject = { text: answer, correct: answer === questionData.correct_answer }? Or just reduce that whole block into: answers.push({ text: answer, correct: answer === questionData.correct_answer });
    – Davi
    Commented Jul 15, 2024 at 12:50

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.