하위 구성 요소에 대해 Vue Propos가 작동하지 않습니다.

하위 구성 요소에 대해 Vue Propos가 작동하지 않습니다.

사용자 데이터에 로그인한 루트 요소와 로그인한 사용자 프로파일 컴포넌트에 소품으로 로그인한 사용자 데이터를 전달합니다.

그러나 하위 구성 요소에서 사용자 개체 속성을 호출하려고 하면 정의되지 않은 오류가 발생합니다.하위 구성요소에 값이 없습니다.

app.module

Vue.component("usersmanagment", require("./components/usersmanagment"));

const app = new Vue({
    el: "#app",
    components: {
        'v-select': vSelect
    },
    data() {
        return {
            AuthorizedUser: {
                Email : "",
                FirstName : "",
                LastName : "",
                CreatedUtcDateTime : "",
                IsActive : ""
            }           
        };
    },
    mounted() {
        let vm = this;      
        vm.getAuthorisedUserProfile();
    },
    methods: {
        getAuthorisedUserProfile() {
            let vm = this;          
            // just return auth user data
    }

});

아이 컴포넌트보다 패스 소품입니다.

module.exports = {
    props : ["AuthorizedUser"],

};

그리고 내 뷰 파일에서 나는 Asp다.넷 MVC

<usersmanagment inline-template>
        <input type="text" class="form-control" v-model="AuthorizedUser.FirstName">
</usersmanagment> 

vue chrome 개발 도구에서 인증된 사용자가 업데이트되지만 하위 구성 요소에서 해당 값이 업데이트되지 않는 것을 볼 수 있습니다.

여기에 포함시키지 않으셨지만, 제 추측으로는 소품을 전달하고 있는 것 같습니다.camelCase하지만 당신은 그것을 통과시켜야 돼요.kebab-case('camel Case vs kebab-case' 참조).따라서 다음 작업을 수행해야 합니다.

<child-component :authorized-user="AuthorizedUser"></child-component>

v-for에 :key propo가 누락되어 이러한 문제가 발생할 수도 있습니다.

이것이 나의 문제를 해결했다.아이 템플릿으로 소품을 묶어야 해요.

<profile inline-template v-bind:authorized-user="authorizedUser">
        <div>

            <input type="text" v-model="authorizedUser.FirstName" class="form-control">
        </div>    

    </profile> 

언급URL : https://stackoverflow.com/questions/44408868/vue-props-not-working-for-child-component