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.

Yes. Here is an example. The only thing added is the template. It works. codepen.io/Kradek/pen/jGVPvK?editors=1010 — Bert
i dont know .. it should work. but i cant use the data value inside mounted, created or any method. but they are working in template.. — WahidSherief
How are you passing it? What is the template? Need more code. — Bert

Ikbel Ikbel · Accepted Answer · 2017-09-23T16:07:11

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);
    }
}

how to use data value inside mounted vue js

1 Answers