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

#javascript #vue.js

Вопрос:

Ниже у меня есть код, который извлекает данные из 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=10amp;category=9amp;difficulty=mediumamp;type=multiple', {
        method: 'get'
    })
      .then((response) => {
          return response.json()
      })
      .then((jsonData) => {
          this.questions = jsonData.results
      })
    }
}

1. где вы определили question1 ?

2. :вопрос1=»вопросы [индекс]»

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

4. Подробнее читайте здесь

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

Ответ №1:

question1 является локальной переменной, объявленной в области видимости v-for в шаблоне, она не определена как свойство on this .

Ваше answers вычисляемое свойство кажется немного ненужным (все, что оно делает, это переносит правильный ответ в массив), тем не менее, вместо этого вы бы использовали метод:

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

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

Ответ №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>