Read props from parent component in a list of dynamic components

Question

I have a problem to read the passed data via props in Vue.js from parent to child. I have a list of components

components: [
        {
          name: "Cart Overview",
          component: "CartOverview",
          props: this.shopperCart
        },
        {
          name: "Bank Account Overview",
          component: "BankAccountOverview",
          props: {}
        },
        { name: "Verification", component: "Verification", props: {} },
        {
          name: "Completion Message",
          component: "CompletionMessage",
          props: {}
        }
      ]

The variable "shopperCart" is set by a request from a backend.

Template of the parent component

<div class="modal-body">
  <component
    :is="checkoutComponents[currentStep].component"
    v-bind="checkoutComponents[currentStep].props"
  ></component>
</div>

The user can navigate through the components with a next step button who sets the variable currentStep.

Example of one child component

<template>
  <div>
    <h1>Cart Oerview</h1>
    {{ shopperCart }}
  </div>
</template>
<script>
export default {
  name: "CartOverview",
  props: {
    shopperCart: { type: Object, default: () => {} }
  },
  mounted() {
    console.log("shopperCart", this.shopperCart);
  }
};
</script>

The components lie on a modal. The log output only shows up displaying undefined when I refresh the page, where I can open the modal.

Can someone please help me?

Best regards, A. Mehlen

A. Mehlen A. Mehlen · Accepted Answer · 2019-10-18T05:19:38

I found myself a solution. I changed in the parent component the v-bind with :data

<div class="modal-body">
  <component
    :is="checkoutComponents[currentStep].component"
    :data="checkoutComponents[currentStep].props"
  ></component>
</div>

and in the child component the name of the prop

<template>
  <div>
    <h1>Cart Oerview</h1>
    {{ data }}
  </div>
</template>
<script>
export default {
  name: "CartOverview",
  props: {
    data: { type: Object, default: () => {} }
  },
  mounted() {
    console.log("shopperCart", this.data);
  }
};
</script>

Now it works :-)

Read props from parent component in a list of dynamic components

1 Answers