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 - JavaScript
<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 encountered the following error message:
[Vue warn]: Property or method "qIndex" is not defined on the instance but referenced during render. Ensure that this property is reactive by either defining it in the data option or initializing it for class-based components.
The same error is occurring with "userReponses".
I'm puzzled by the error and have attempted some research, but the solutions I found don't seem to apply to my case.
Question:
Why can't I access my data? It works fine when just referencing this component, but as a child component, it throws this error. I'm unsure how to resolve it.