Issue with passing props from parent component to child component in Vue.js not functioning

Question

Issue with passing props from parent component to child component in Vue.js not functioning

As a newcomer, I have been assigned a project that involves using Vuejs.

In this project, there is a page that utilizes a component called DashboardCard. Each DashboardCard receives 2 props - val and icon from the parent component.

https://i.stack.imgur.com/kADo3.png

I have declared the props in the DashboardCard component (child component), but for some reason, not all prop values are being passed and assigned.

https://i.stack.imgur.com/JLt3x.png

Now, I am encountering an error related to this issue:

https://i.stack.imgur.com/eNa9u.png

UPDATE: Upon checking the Vuejs devtool log, it appears that the props were indeed passed correctly. https://i.stack.imgur.com/tdCkv.png

javascript vue.js parameter-passing vue-devtools

Answer 1

Answer №1

One of the reasons for the issue is that you are trying to access the props before they hold any value. There are two ways to resolve this:

Within the parent component (Dashboard.vue):

Try passing the values like

:icon="'@/assets/sale.png'"

and :val="'$700'"

In the child Component (DashboardCard.vue):

Method-1:

Create two data variables and set them with the prop values using a watch handler

export default {
 components: {DatePicker},
 props: {
   icon: {
     type: String,
     default: ''
   },
   val: {
     type: String,
     default: ''
   }
 },
 data() {
  return {
    iconPath: '',
    amtVal: ''
  };
 },
 watch: {
  icon(newVal, oldVal) {
    this.iconPath = newVal;
  },
  val(newVal, oldVal) {
    this.amtVal = newVal;
  }
 }

Use your local data variables in the template like

<span>{{amtVal}}</span>

and

<img :src="require(iconPath)" alt="icon" />

Method-2:

Utilize a computed property

export default {
 components: {DatePicker},
 props: {
   icon: {
     type: String,
     default: ''
   },
   val: {
     type: String,
     default: ''
   }
 },
 computed: {
   getIcon() {
     return this.icon;
   },
   getVal() {
    return this.val;
   }
 }

Incorporate these computed properties in the template like

<span>{{getVal}}</span>

and

<img :src="require(getIcon)" alt="icon" />

Answer 2

One of the reasons for the issue is that you are trying to access the props before they hold any value. There are two ways to resolve this:

Within the parent component (Dashboard.vue):

Try passing the values like

:icon="'@/assets/sale.png'"

and :val="'$700'"

In the child Component (DashboardCard.vue):

Method-1:

Create two data variables and set them with the prop values using a watch handler

export default {
 components: {DatePicker},
 props: {
   icon: {
     type: String,
     default: ''
   },
   val: {
     type: String,
     default: ''
   }
 },
 data() {
  return {
    iconPath: '',
    amtVal: ''
  };
 },
 watch: {
  icon(newVal, oldVal) {
    this.iconPath = newVal;
  },
  val(newVal, oldVal) {
    this.amtVal = newVal;
  }
 }

Use your local data variables in the template like

<span>{{amtVal}}</span>

and

<img :src="require(iconPath)" alt="icon" />

Method-2:

Utilize a computed property

export default {
 components: {DatePicker},
 props: {
   icon: {
     type: String,
     default: ''
   },
   val: {
     type: String,
     default: ''
   }
 },
 computed: {
   getIcon() {
     return this.icon;
   },
   getVal() {
    return this.val;
   }
 }

Incorporate these computed properties in the template like

<span>{{getVal}}</span>

and

<img :src="require(getIcon)" alt="icon" />

Answer 3

Answer №2

Don't forget to close your script tag with </script> in the DashboardCard component as Vue won't recognize the component properties without it. I initially thought there was more code below, but it wasn't until I tested it in a sandbox environment.

Keep in mind that in the Vue devtools extension, props should be listed under the props tab, which doesn't seem to be the case for you.

I recommend using snippets to prevent these types of typos. Personally, I use Vetur which not only helps with avoiding errors but also provides syntax highlighting—a very useful extension indeed.

Check out Vetur here for an enhanced coding experience!

Answer 4

Don't forget to close your script tag with </script> in the DashboardCard component as Vue won't recognize the component properties without it. I initially thought there was more code below, but it wasn't until I tested it in a sandbox environment.

Keep in mind that in the Vue devtools extension, props should be listed under the props tab, which doesn't seem to be the case for you.

I recommend using snippets to prevent these types of typos. Personally, I use Vetur which not only helps with avoiding errors but also provides syntax highlighting—a very useful extension indeed.

Check out Vetur here for an enhanced coding experience!

Issue with passing props from parent component to child component in Vue.js not functioning

Answer №1

Answer №2

Similar questions

removing a specific cookie from the browser's cookies using jQuery

How to successfully configure environment variables in Next.js and deploy them on Netlify

Unable to allocate a second item to an existing one

Maintaining state value during client-side navigation in NextJs with Next-Redux-Wrapper

Expanding the use of tagged template literals for passing additional arguments

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Add a style to every div except for the final one

Error: An unidentified type was encountered that is not a functioning element within an anonymous PHP JavaScript function

Using Vue.js to process JSON data

Can you explain the distinction between compiled and interpreted programming languages?

Can Jquery mobile detect drag gestures?

Solution: Replace occurrences of 'window' with 'global' for improved

How to target the last child in Flexbox using CSS order property

When a JSON object is handled as a string

Struggling to integrate Nuxt.js, Express, and a 3rd-party API seamlessly

Convert the entire webpage to JSON format instead of traditional HTML using Nuxt.js

Mapping the changes in the checkbox of a material tree node

Ensure Angular JS includes a space or special character after applying a currency filter

Trouble with the display none function