My code fetches data from an API. The questions display correctly, but the answers cause an error that crashes the app.
Initially, the code worked fine in App.vue, but moving it to a different view page caused the crash. Any suggestions on how to fix 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() {
// The problem lies here: it can't read the correct_answer and throws an 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
})
}
}