Vue 2 props on child component undefined-CodePudding

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

CodePudding user response：

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>