Vuejs props use in the client component - vue.js

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>