[Vue warn]: Error in render: “TypeError: Cannot read property 'correct_answer' of undefined”

Question

I have code below that fetches data from an API. Here, the questions part is showing good, but, when it comes to the answers, the error mentioned above shows and it crashes the app.

The first time I built it in App.vue, it was working fine, but, when I move it to a view page, it crashes. Any idea on how to solve this?

<template>
    <div class="container-question" width=800px>
        <b-row>
            <b-col cols="8">
                <h1> Recently Asked </h1>
                <ul 
                    v-for="(question1,index) in questions" 
                    :key="index" 
                    :question1="questions[index]"
                >
                    <li>
                        {{ question1.question }}
                        <b-row id="asked-info">
                            <p>Asked by:  </p>
                            <div 
                                id="user" 
                                v-for="(answer, index) in answers"
                                :key="index"
                            > 
                                {{ answer }} 
                            </div>
                        </b-row>
                        <b-row>
                            <b-button class="outline-primary" style="margin:auto;">
                                Answer
                            </b-button>
                        </b-row>
                    </li>
                </ul>
            </b-col>
        </b-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            questions: [],
            index: 0,
    }
},

computed: {
    answers() {
        // here is the problem it can't read the correct_answer and shows the error
        let answers = [this.question1.correct_answer]; 
        return answers;
    },
},

mounted: function() {
    fetch('https://opentdb.com/api.php?amount=10&category=9&difficulty=medium&type=multiple', {
        method: 'get'
    })
      .then((response) => {
          return response.json()
      })
      .then((jsonData) => {
          this.questions = jsonData.results
      })
    }
}

Answer 1

question1 is a local variable declared within the scope of the v-for in the template, it isn't defined as a property on this.

Your answers computed property seems a bit unnecessary (all it does is wrap the correct answer in an array), nevertheless you would use a method instead:

methods: {
  answers(question1) {
    let answers = [question1.correct_answer]; 
    return answers;
  }
}

<div 
  id="user" 
  v-for="(answer, index) in answers(question1)"
  :key="index"
> 

Answer 2

Have you tried using an async function? Such as below

computed: {
        async answers() {
          let answers = [this.question1.correct_answer];
          return await answers;
        },
       
      },

In conjunction with a v-if

  <div id="user" v-if="answer.id" v-for="(answer, index) in answers" :key="index"> 
 {{ answer }} 
  </div>