하위 구성 요소에 Vue Prop가 정의되지 않았습니다.

하위 구성 요소에 Vue Prop가 정의되지 않았습니다.

개체 내부의 배열을 상위 구성 요소에서 하위 구성 요소로 전달하려고 하지만 응답이 정의되지 않았습니다.상위 컴포넌트의 프로펠을 체크할 때는 데이터가 존재하지만 하위 컴포넌트에 전달되면 정의되지 않습니다.

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

})

edit: 부모 선언 장소입니다.

<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",
        }],

        },
    })

쿼리:

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

네 안에 뭐가 들었는지 확인해봐야겠어data확실히 할 수 있지만, 아마도 변경 검출 경고 중 하나에 직면하게 될 것입니다.

사용해보십시오.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)
                }
            })
        })
    })

언급URL : https://stackoverflow.com/questions/49663100/vue-prop-undefined-in-child-component