Vuejs props use in the client component

Question

Hi I'm trying to pass a value to a child component as props and trying to use this value in child's created hook but it's not getting set. See example below,

<!-- Parent component -->
<template>
  <div>
     <details
       :customer_id = this.customer_id
       :foo = "bar" />
  </div>
</template>
<script>
  import CustomerDetail from './CustomerDetails';
  export default {
    name: 'Customer',
    data: function() {
      return {
        customer_id: '',
     }
  components: {
    'detail': CustomerDetail   
  },

  created: function() {
    var id = this.$route.params.id;
    this.customer_id = id;
  } // created
}  
</script>

<!-- Details component -->
<template>
  <div>
    <h1>{{foo}}</h1>
  </div>
</template>
<script>
  export default {
    name: 'CustomerDetail',
    props: ['customer_id', 'foo']     

    created: function() {
      console.log(this.customer_id); <!-- -->
    } // created
  }
</script>

As shown in above code, when child component is rendered, may times the customer_id in created() hook of child component is undefined. It shows up occasionally if hotloading happens on the same view. How do I make sure that this value always available. In this case I want to do server call to get customer details. At the same time {{foo}} correctly show value 'bar'. What am I missing? Any help is appreciated.

Answer 1

Registered child components actually have direct access to the route params, since you are using Dynamic Route Matching , you can simply get the dynamic params via $routes.params.* from the child components themselves.

 const Customer = { template: ` <div> <h3>Customer ID: {{$route.params.id}}</h3> </div> ` } const routes = [ { path: '/customers/:id', component: Customer } ]; new Vue({ el: '#app', router: new VueRouter({ routes }), data() { return { bar: 'Doh!', //customer_id: '', } }, components: { CustomerDetails: { template: ` <div> <h1>Value from parent: <em>{{foo}}</em></h1> </div> `, props: ['foo'] } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script> <div id="app"> <div> <label>View profile:</label> <router-link to="/customers/john">John</router-link> <router-link to="/customers/doe">Doe</router-link> <router-view></router-view> <div> <customer-details :foo="bar"></customer-details> </div>