Vue Props not working for child component

Question

I have root element that has logged in user data and on user profile component I am passing logged in user data as props.

But when I try to call User object properties in child component it throws error as undefined. I don't see any value in child component.

app.js

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
    }

});

Than on child component I am passing props

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

};

and in my view file I am Asp.Net MVC

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

I can see in vue chrome dev tools that Authorized user get updated but its value don't get updated on child component.

Answer 1

You haven't included it here, but my guess would be that you are passing the prop using camelCase but you need to pass it using kebab-case (see: camelCase vs kebab-case). So make sure you are doing:

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

Answer 2

Note that something like this can also be caused by a missing :key prop in a v-for.

Answer 3

This is what solved my problem. I have to bind props with child template.

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

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

    </profile>