Child component in Vue 2 not receiving defined props

Question

Child component in Vue 2 not receiving defined props

After numerous attempts, I am still struggling to successfully pass a prop down to a child component.

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

The child component is supposed to accept this prop:

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

Although when trying to access this prop, it always returns as undefined.

If I log the prop in the parent component, here's what is displayed:

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

However, in the child component, running:

console.log(this.threshold)

the output is consistently showing as undefined.

javascript vue.js vuejs2

Answer 1

Answer №1

I have successfully implemented the solution by creating a code snippet to pinpoint the root cause. By referencing the code provided, I was able to confirm that the functionality is working as expected. Please review and let me know if there are any particular areas where you are encountering challenges. Utilizing console.log, you can observe the data within the threshold variable across all lifecycle hooks.

Demonstration :

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>

Answer 2

I have successfully implemented the solution by creating a code snippet to pinpoint the root cause. By referencing the code provided, I was able to confirm that the functionality is working as expected. Please review and let me know if there are any particular areas where you are encountering challenges. Utilizing console.log, you can observe the data within the threshold variable across all lifecycle hooks.

Demonstration :

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>

Child component in Vue 2 not receiving defined props

Answer №1

Similar questions

How to Retrieve Video Length using AJAX in the YouTube API

Ways to store a filestream coming from Node.js into AngularJS

Can I send both a list of files and an entire JSON object in a FormData object to an ASP.NET CORE MVC Controller?

How can a React app be developed offline?

creating a JSON object

Utilizing AJAX for fetching a partial view

Change locale in Vue with Vue-i18n

Exploring the capabilities of TabrisJs in conjunction with Upnp technology

How to Highlight Text in a textField Using Vuetify

How to extract various arrays of identical objects from a larger array in JavaScript

What is causing the data to be altered outside of the directive scope?

Is it necessary to configure modules using app.use in every route in express.js?

Tracking the email field in a React form with refs

SyntaxError: An unidentified item was encountered at the <head> location

How to easily retrieve additional data and update a document using Meteor

node js retrieves information from the request body

Stop the removal of the CSS content property

The Webstorm AngularJS extension appears to be malfunctioning, as it is not able to recognize the keyword 'angular'

Is it better to utilize angular's $interval or a promise to execute code upon completion of an api call?

The class name is not defined for a certain child element in the icon creation function