how to use data value inside mounted vue js

Question

I want to assign props value in data and use this data value inside mounted. right now my approach is which is not working:

dashboard.vue

<template>
    <div>
        <navigation-section :userid='userID'
                            :username='username'
                            :profilepic='profile_pic'
                            :unreads='unreads'>
        </navigation-section>
    </div>
</template>

<script>
    import NavigationSection from '../components/NavigationSection';

    export default {
        components: {   
            NavigationSection,
        },

        data() {
            return {
                posts: [],
                userID: '',
                username: '',
                unreads: [],
                profile_pic: '',
            }
        },

        created() {
            this.getNavInfo();
        },

        methods: {
            getNavInfo() {
                axios.get('get_nav_info').then(response => {
                    this.userID = response.data.userID;
                    this.username = response.data.username;
                    this.profile_pic = response.data.profile_pic;
                    this.unreads = response.data.unreads;
                })
            }
        }
    }
</script>

NotificationSection (child of dashboard.vue)

<template>
    <div>
        <notification :userid='userid' :unreads='unreads'></notification>
        <h1>{{ username }}</h1>     
        <img :src='profilepic' :alt='profilepic'> 


    </div>
</template>

<script>
    import Notification from '../components/Notification';

    export default {
        props:['userid', 'username', 'unreads', 'profilepic'],
        components: {
            Notification
        }
    }
</script>

Notification (child of NotificationSection.vue)

<template>
    <div>
        // values shows in template
        unreads array length: <div class="count" v-if='unreads.length > 0'>{{ unreads.length }}</div>
        userid : <p>{{ userid }}</p>
    </div>
</template>

<script>
    export default {
        props:['unreads', 'userid'],

        computed: {
            userID() {
                return this.userid 
            }
        },

        mounted() {
            console.log(this.userID); // ** problem : in console.log shows a blank instead of id which is working on template. 
        }   
    }

</script>

i have edited the question. the values are showing in template but when i want to use the props value inside mounted or event try to access data value inside script it doesnt work. advance thanks for help.

Answer 1

You can use computed properties:

export default {
    props: ['userid'],

    computed: {
        userID() {
            return this.userid
        }
    },

    mounted() {
        console.log(this.userID);
    }
}

Or simply:

export default {
    props: ['userid'],

    mounted() {
        console.log(this.userid);
    }
}