マウントされたvue js内のデータ値の使用方法

Question

データにprops値を割り当て、このデータ値をマウント内に使用したい。今、私のアプローチが動作していないされている：

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> 

私は質問を編集しました。値はテンプレートに表示されていますが、マウントされた内部またはイベント内の小道具の値を使用したい場合は、スクリプト内のデータ値にアクセスしようとすると動作しません。助けてくれてありがとう。

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