[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'correct_answer'”答案

【问题标题】：[Vue warn]: Error in render: "TypeError: Cannot read property 'correct_answer' of undefined"[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'correct_answer'”
【发布时间】：2021-03-21 07:29:56
【问题描述】：

下面有从 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？
:question1="questions[index]"
如果你的意思是作为道具，你需要在你的子组件中接受道具：props: ['question1']
阅读更多here
我添加了不起作用的道具

标签： javascript vue.js

【解决方案1】：

您是否尝试过使用异步函数？比如下面

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>

【讨论】：

你不能在同一个 div 中同时分配 v-f 和 v-for 也异步显示错误

【解决方案2】：

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

【讨论】：