comment utiliser la valeur de données à l'intérieur de la vue montée js

Question

Je veux attribuer la valeur des accessoires dans les données et utiliser cette valeur de données à l'intérieur monté. en ce moment mon approche est ce qui ne fonctionne pas:

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 (enfant 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> 

Avis (enfant de 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> 

J'ai édité la question. Les valeurs sont affichées dans le modèle, mais quand je veux utiliser la valeur des accessoires à l'intérieur monté ou événement essayer d'accéder à la valeur des données dans le script, il ne fonctionne pas. avance merci pour l'aide.

Answer 1

Vous pouvez utiliser les propriétés calculées:

export default { 
    props: ['userid'], 

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

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

Ou simplement:

export default { 
    props: ['userid'], 

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