Vue 2 props on child component undefined

Question

So I'm trying to pass a prop down to a child component as follows.

<Project :grossMarginPerResource="grossMarginPerResource" :threshold="threshold" :orderBy="orderBy" @refetch="refetch" v-if="group_by == 'Project'"></Project>

The child component accepts this prop

props: ['grossMarginPerResource', 'orderBy', 'show_costs','threshold'],

Whenever I try to access this prop, either by console logging it, it prints out as undefined,

Logging it in the parent component shows the following:

{ "green": "1000", "yellow": "400", "red": "400" } 

but if I do in the child component:

console.log(this.threshold)

it prints out undefined

Answer 1

It should work, To find the root cause I just created this code snippet and it is working fine as per the code you mentioned above. Can you please have a look and confirm at which place you are facing issue as console.log will return the threshold data in all the life cycle hooks.

Demo :

 Vue.component('Project', { props: ['threshold'], template: '<pre>{{ threshold }}</pre>', mounted() { console.log(this.threshold) } }); var app = new Vue({ el: '#app', data: { threshold: { "green": "1000", "yellow": "400", "red": "400" } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <Project :threshold="threshold"></Project> </div>