Javascript 为什么创建Vue组件时我的阵列未定义？

我很难理解为什么我的Vue组件中没有定义数组。以下是流程：

SelectCategories.vue组件使用路由器推送至quick.vue组件。在这里，我使用道具将数据传递给测验组件。这是如何做到的：

我们继续讨论quick.vue组件，我在创建的生命周期挂钩上执行以下操作：

    async created() {
        for (const item of this.items) {
            var questions = await QuestionService.getQuestionsByCategory(item);
            this.questions.push(questions);
            console.log(this.questions);
        }
  }

QuestionService访问数据库并获取一些信息，这些信息被推送到我在这里定义的questions数组中：

export default {
    name: 'quiz',
    props: ['items'],
    data: function() {
      return {
        questions: [],
        error: '',

      };  
    }

最后，我尝试使用h1访问模板中的此数据：

<h1>{{questions[0][0].description}}</h1>

{{问题[0][0]。说明}

但是，我最终出现以下错误：

TypeError:无法读取未定义的属性“0”

我在控制台中看到的是：

{{问题[0][0]。说明}

在我填充创建的生命周期挂钩中的问题数组之前发生。正如你在这里看到的：

我的理解是，created是在模板之前调用的，但我可能错了。我想要完成的是让created（）中的功能在加载模板之前完成，因此首先填充数组。谢谢你的帮助

我想要完成的是在加载模板之前，让created（）中的功能已经实现

。。这是不可能的。了解更多关于JS异步的信息<代码>等待不会阻止整个应用程序的执行

created（）

hook只返回promise，并计划在异步调用完成时继续

---

唯一的方法是以一种方式编写模板，使数据最初不存在，以后会出现…

使创建的

异步，并在其中使用
wait
不会阻止创建和安装组件。它只会阻止在
等待
之后执行放置在
创建
中的代码，直到承诺解决为止

这意味着您的组件将在
questions
中呈现，而不包含预期内容（直到
questions
在调用返回后得到更新）

解决方案是通过在if条件（或
中的
v-if）中包装这些块来防止组件中当前断开的任何东西断开


这类问题的常见解决方案是从组件外部进行调用，并根据响应调整其呈现（创建）。通常，您希望将由多个组件使用的数据放在一个存储中（单一真实来源），然后可以将其注入到您需要的任何位置

对于更复杂的存储，可以使用Vuex；对于非常简单的存储（基本数据共享），可以使用Vue.observable（）

<h1>{{questions[0][0].description}}</h1>