CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Epistemologist
Epistemologist

Reputation: 1091

Vue Props not working for child component

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.

Upvotes: 6

Views: 22512

Answers (3)

craig_h
craig_h

Reputation: 32704

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>

Upvotes: 18

Zain
Zain

Reputation: 71

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

Upvotes: 1

Epistemologist
Epistemologist

Reputation: 1091

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>

Upvotes: 1

Related Questions