Uncaught TypeError: $props.currentQuestion is undefined Vue

Question

i am following this tutorial. https://www.youtube.com/watch?v=4deVCNJq3qc

below is my code for QuestionBox.vue

<template>

    
      <div>
       {{ currentQuestion.question}}
      </div>
    

</template>


<script>

export default {
    props: {
      currentQuestion: Object     
    }
}
</script>

Below is code for App.vue

<template>
  <div>
    <Header />
    <QuestionBox 
    
    :currentQuestion="questions[index]"

    />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import QuestionBox from './components/QuestionBox.vue'

export default {
  name: 'app',
  components: {
    Header,
    QuestionBox
  },
  data(){
    return {
      questions:[],
      index:0
    }
  },
  mounted: function(){
    
    fetch('https://opentdb.com/api.php?amount=4&type=multiple',{
      method: 'get'
    })
    .then((response) => {
     
      return response.json()
      
    })
    .then((jsonData) => {
      this.questions = jsonData.results
     
    })
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

when i compile the code it succeeded but i am not getting the expected result which is question from index 0, instead when i do inspect i am getting error Uncaught TypeError: $props.currentQuestion is undefined . I am stuck there for 2 days, What i am doing wrong? Please help. Thanks in advance.

@bassxzero thank you, you are right, i added your code and ok now. but can you please explain why do i need that v-if ? the tutor in tutorial didn't add that code and work fine. i am very new to vue. thank you. and how do i close this question and make you as answer? — kaung htet naing, Apr 09 '21 at 03:17

score 1 · Accepted Answer · answered Apr 09 '21 at 03:22

Add v-if="questions[index]" on your <QuestionBox>. You're fetching data for this.questions in your mounted hook so there is a period where the questions array is empty. So you're passing questions[index] or questions[0] to the <QuestionBox> as a prop. At that time, questions[0] evaluates to undefined. So in your QuestionBox you're trying to access the property question of undefined. {{ currentQuestion.question}} Which gives you an error.

<template>
  <div>
    <Header />
    <QuestionBox 
    
    v-if="questions[index]"
    :currentQuestion="questions[index]"

    />
  </div>
</template>

wow thank you very much for explanation. it is working fine now. — kaung htet naing, Apr 09 '21 at 03:26

Marcello B. · Answer 2 · 2021-04-09T03:30:54.917

0

Add a v-if to the <div> tag in Questionbox.vue:

<template>
  <div v-if="currentQuestion">
    {{ currentQuestion.question }}
  </div>
</template>

This will prevent Vue from attempting to render until there is data present in currentQuestion. Then when currentQuestion becomes truthy it will be rendered.

See also: https://stackoverflow.com/a/41052023/2073738

edited Apr 09 '21 at 03:30

answered Apr 09 '21 at 03:21

Marcello B.

4,177
11
45
65

score 0 · Answer 3 · answered Apr 09 '21 at 04:35

0

You can also change the initial value of questions to questions:[{}] in App.vue

answered Apr 09 '21 at 04:35

Abdarahmane Traoré

144
6

That would render the component to the DOM with no content. And the props would be undefined. Very unnecessary. – tauzN Apr 11 '21 at 11:09

Uncaught TypeError: $props.currentQuestion is undefined Vue

3 Answers3

Linked