Javascript Vuejs组件无法访问其自己的数据

主要组件：

<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>

变量测验={
文字：“废话：，
问题：[“诸如此类”]
}
从“/spellingQuiz1.vue”导入拼写quiz1；
导出默认值{
组成部分：{
拼写测验：拼写测验1
},
数据：函数（）{
返回{
小测验：小测验
}
}
};

拼写测验组件-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>

上
下一个

总分：{{score（）}/{{quick.questions.length}

拼写测验组件-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>

导出默认值{
道具：{
测验：{
类型：对象，
必填项：true
},
数据：函数（）{
返回{
qIndex:0，
userResponses:Array（quick.questions.length）.fill（false）
};
},
方法：{
下一个（）{
this.qIndex++；
},
prev（）{
这是qIndex；
},
分数（）{
返回this.userResponses.filter（函数（val）{return val=='correct'}）；
}
}
}
}; 

我得到以下错误：

[Vue warn]：未在实例上定义属性或方法“qIndex”，但在呈现过程中引用了该属性或方法。请通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的

对于“UserResponses”，我也会遇到同样的错误

我不理解这个错误，我有一些研究，但这些例子并不真正适用于我的问题

问题：

---

为什么我的数据不可访问？如果我只引用此组件，它会工作，但作为子组件，它会抛出此错误。我不确定如何修复它。

在道具之后缺少一个

。当前，您的

数据
属性位于
道具
属性中。
数据
应该位于根对象上。结构应如下所示：

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