[Предупреждение Vue]: ошибка рендеринга: «TypeError: не удается прочитать свойство «correct_answer» неопределенного»

У меня есть код ниже, который извлекает данные из 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 ?

Boussadjra Brahim 09.12.2020 22:20

:question1 = "вопросы[индекс]"

sara97 09.12.2020 22:26

Если вы имеете в виду реквизит, вам нужно принять реквизиты в вашем дочернем компоненте: props: ['question1']

Daniel_Knights 09.12.2020 22:29

Подробнее здесь

Daniel_Knights 09.12.2020 22:30

Я добавил реквизит, это не сработало

sara97 09.12.2020 22:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
518
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы пробовали использовать асинхронную функцию? Например, ниже

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 показывает ошибку

sara97 09.12.2020 22:27
Ответ принят как подходящий

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

Другие вопросы по теме