Javascript 子组件中未定义Vue属性

我试图将对象内部的数组从父组件传递到子组件，但结果是未定义的。当检查父组件中的道具时，数据就在那里，但当它传递给子组件时，它是未定义的

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

})

查询：

$.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
                        // question["answers"].push(json)
                    }
                })
            })
        })

---

我们必须检查您的

数据中的内容才能确定，但您可能面临一个问题

尝试使用
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)
                }
            })
        })
    })

“答案未定义”在哪里？错误消息到底是什么？您能粘贴父级声明吗？@Phil使用Vue chrome扩展显示属性“answers”未定义，即使在父级组件的属性“question”中包含名为answers的数组。@acdcjunior，这就是您所说的父级声明无法复制问题的意思吗~Yeah，没问题。我推荐链接医生。这其实是一个很普遍的问题。了解它将有助于你在未来获得更多的时间！
$.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
                        // question["answers"].push(json)
                    }
                })
            })
        })

$.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)
                }
            })
        })
    })