Vuejs component cannot access its own data

Question

main component:

<template>
    <spelling-quiz v-bind:quiz="quiz"></spelling-quiz>
</template>

<script>

    var quiz = {
        text: "blah:,
        questions: ['blah blah']
    }

    import spellingQuiz1 from './spellingQuiz1.vue';
    export default {
        components: {
            spellingQuiz: spellingQuiz1
        },
        data: function(){
            return{
                quiz: quiz
            }
        }
    };

</script>

spelling-quiz component - HTML

<template>
  <div>
    <br>
    <div v-for="(question, index) in quiz.questions">
        <b-card v-bind:header="question.text" 
            v-show="index === qIndex"
            class="text-center">
            <b-form-group>
                <b-form-radio-group
                    buttons
                    stacked
                     button-variant="outline-primary"
                    size="lg"
                    v-model="userResponses[index]"
                    :options="question.options" />
            </b-form-group>
            <button v-if="qIndex > 0" v-on:click="prev">
                prev
            </button>
            <button v-on:click="next">
                next
            </button>
        </b-card>
    </div> 
    <b-card v-show="qIndex === quiz.questions.length"
        class="text-center" header="Quiz finished">
        <p>
            Total score: {{ score() }} / {{ quiz.questions.length }}
        </p>
    </b-card>
   </div>
</template>

spelling-quiz component - JS

<script> 

export default{
    props:{
      quiz: {
        type: Object,
        required: true
      },
    data: function(){
        return{
            qIndex: 0,
            userResponses: Array(quiz.questions.length).fill(false)
        };
    },
    methods:{
        next(){
            this.qIndex++;
        },
        prev(){
            this.qIndex--;
        },
        score(){
            return this.userResponses.filter(function(val){return val == 'correct'}).length;
        }
      }
    }
}; 

</script>

I am getting the following error:

[Vue warn]: Property or method "qIndex" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I am also getting the same error for "userReponses".

I do not understand the error, and I have some research but the examples do not really apply to my issue.

Question:

Why is my data not accessible? If I refer to just this component it works, but as a child component it throws this error. I am not sure how I can fix it.

Jeremy Walters · Accepted Answer · 2018-08-21 05:53:59Z

1

You have a missing } after the props. Currently your data attribute live in your props attribute. data should live on the root object. Should be structured like this:

export default {
  name: "HelloWord",
  props: {
    quiz: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      test: 100
    };
  },
  methods: {
    next() {},
    prev() {},
    score() {}
  }
};

answered Aug 21, 2018 at 5:53

Jeremy Walters

2,15219 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Vuejs component cannot access its own data

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related