Question

我试图将一个对象内部的数组从父组件传递给子组件，但答案是未定义的。当检查父组件中的prop时，数据就在那里，但当它到达子进程时，它是未定义的。

Parent root2 = loader2.load();

编辑：这是声明父级的地方

Vue.component('single-question', {
    props: ['question'],
    data: function () {
        let vm = this
        return {
            answers: vm.question.answers
        }
    },
    template: `<div class="question mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="class-title">{{question.questionId}}</h5>
                        <p class="card-text">{{question.questionText}}</p>
                        <a class="btn btn-primary" data-toggle="collapse" v-bind:href="'#answerArea' + question.questionId" role="button" aria-expanded="false" aria-controls="answerArea">List answers</a>
                    </div>
                </div>
                <answer-area v-bind:id="'answerArea' + question.questionId" v-bind:answers="question.answers"></answer-area>
            </div>`   
})

Vue.component('answer-area', {
    data: function() {
        return {
            show: false
        }
    },
    props: ['answers'],
    template: `<div class="collapse" id="">
                <div class="card card-body">
                    <ol>
                        <li v-for="answer in answers" v-bind:key="answer.answerId"></li>
                    </ol>
                </div>
            </div>`

})

家长数据：

<div id="question-area">
            <single-question v-for="question in questions" v-bind:key="question.questionId" v-bind:question="question"
                v-bind:id="question.questionId"></single-question>
        </div>

查询：

    new Vue ({
        el: '#question-area',
        data: {
            questions: [{
               "answers": [{
                    "answerId": 21,
                    "questionId": 1,
                    "answerText": "One",
                    "iscorrect": false
                },
                {
                    "answerId": 40,
                    "questionId": 1,
                    "answerText": "In",
                    "iscorrect": false
         }],
            "questionId": 1,
            "classCode": "123",
            "questionText": "Result",
        }],

        },
    })

Answer 1

我们必须检查data中的内容是否确定，但您可能正面临Change Detection Caveats之一。

尝试使用Vue.set()创建answers媒体资源，如下所示：

$.getJSON(prestring + "/api/v1/classes/"+parsed.classcode+"/questions", 
function(json) {
        vm.questions = json
        vm.questions.forEach(question => {
            $.ajax({
                url: prestring + "/api/v1/questions/" + question.questionId + "/answers",
                dataType: 'json',
                //async: false,
                success: function (json) {
                    // question["answers"] = json
                    Vue.set(question, 'answers', json); // changed this line
                    // question["answers"].push(json)
                }
            })
        })
    })

子组件中未定义Vue Prop

1 个答案: