Question

主要组成部分：

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

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

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

我收到以下错误：

[Vue警告]：属性或方法“ qIndex”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

“ userReponses”也出现了相同的错误。

我不理解该错误，并且进行了一些研究，但是这些示例并没有真正适用于我的问题。

问题：

为什么我的数据无法访问？如果我仅引用此组件，那么它将起作用，但是作为子组件，它将引发此错误。我不确定该如何解决。

Answer 1

道具后您缺少}。当前，您的data属性位于您的props属性中。 data应该位于根对象上。应该这样构造：

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

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

1 个答案: