Why is my array undefined when Vue component is created?

Question

I'm having trouble understanding why an array is undefined in my Vue component. Here is the flow:

SelectCategories.vue component uses router to push to Quiz.vue component. Here I use props to pass on data to Quiz component. Here is how it is done:

      else {
        this.$router.push({
          name: 'quiz',
          params: {
            items: selectedCategories
          }
        })
      }

We move on to Quiz.vue component, where I do the following on the created life cycle hook:

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

The QuestionService reaches out to the database and gets some information, which is pushed into the questions array I have defined here:

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

      };  
    }

Finally, I try to access this data in the template using an h1:

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

However, I end up with the following error:

TypeError: Cannot read property '0' of undefined

What I am seeing in the console is that:

{{questions[0][0].description}}

Is happening before I populate the questions array in the created life cycle hook. As you can see here:

It is my understanding that created is called before the template, but I might be wrong. What I want to accomplish is to have the functionality in created() have happen before the template is loaded, so the array gets populated first. Thank you for the help.

tao · Accepted Answer · 2021-01-12 18:45:54Z

2

What I want to accomplish is to have the functionality in created() have happen before the template is loaded

.. this is not possible. Read more on JS asynchrony. await does not block the execution of whole app. created() hook just returns promise and is scheduled to continue when async call finishes.

Only way is to write your template in a way that the data are not present at first and will come later...

edited Jan 12, 2021 at 18:45

tao

91k18 gold badges136 silver badges174 bronze badges

answered Jan 12, 2021 at 18:33

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tao · Accepted Answer · 2021-01-12 18:55:15Z

Making created async and using await inside it does not prevent the component from being created and mounted. It only prevents the execution of code placed in created after await, until the promise resolves.

Which means your component will render without the expected contents in questions (until questions get updated, after the call returns).

The solution is to prevent anything currently breaking inside your component from breaking by wrapping those blocks in if conditions (or v-if in <template>).

A common solution for this type of problem is to make the call from outside the component and condition its rendering (creation) based on the response. Typically you want to place data that's consumed by more than one component in a store (single source of truth) which can then be injected anywhere you need it.

For more complex stores you could use Vuex and for very simple ones (basic data sharing) you could use Vue.observable().

Collectives™ on Stack Overflow

Why is my array undefined when Vue component is created?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related