У меня есть код ниже, который извлекает данные из API. Здесь часть вопросов отображается хорошо, но когда дело доходит до ответов, появляется упомянутая выше ошибка, которая приводит к сбою приложения.
В первый раз, когда я встроил его в App.vue
, он работал нормально, но когда я перемещаю его на страницу просмотра, он вылетает. Любая идея о том, как решить эту проблему?
<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
})
}
}
:question1 = "вопросы[индекс]"
Если вы имеете в виду реквизит, вам нужно принять реквизиты в вашем дочернем компоненте: props: ['question1']
Подробнее здесь
Я добавил реквизит, это не сработало
Вы пробовали использовать асинхронную функцию? Например, ниже
computed: {
async answers() {
let answers = [this.question1.correct_answer];
return await answers;
},
},
В сочетании с v-if
<div id = "user" v-if = "answer.id" v-for = "(answer, index) in answers" :key = "index">
{{ answer }}
</div>
вы не можете назначить как v-f, так и v-for в одном и том же div, также async показывает ошибку
question1
— это локальная переменная, объявленная в рамках v-for
в шаблоне, она не определена как свойство в this
.
Ваше вычисляемое свойство answers
кажется немного ненужным (все, что оно делает, это оборачивает правильный ответ в массив), тем не менее, вместо этого вы должны использовать метод:
methods: {
answers(question1) {
let answers = [question1.correct_answer];
return answers;
}
}
<div
id = "user"
v-for = "(answer, index) in answers(question1)"
:key = "index"
>
где ты определил
question1
?