如何在已安装的vue js中使用数据值

Question

我想在数据中分配道具值，并在挂载时使用此数据值。现在我的方法不起作用：

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 （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>

通知（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>

我已经编辑了这个问题。值显示在模板中，但是当我想使用装载内的props值或事件尝试访问脚本内的数据值时，它不起作用。提前感谢您的帮助。

Answer 1

您可以使用计算属性：

export default {
    props: ['userid'],

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

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

或者简单地说：

export default {
    props: ['userid'],

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