Читать реквизиты из родительского компонента в списке динамических компонентов - PullRequest
Новая
       12

Читать реквизиты из родительского компонента в списке динамических компонентов

1 голос
/ 17 октября 2019

У меня проблема с чтением переданных данных через реквизиты в Vue.js от родителя к потомку. У меня есть список компонентов 

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: {}
        }
      ]

Переменная "shopperCart" устанавливается по запросу из бэкэнда.

Шаблон родительского компонента 

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

Пользователь может перемещаться по компонентам с помощью кнопки следующего шага, которая устанавливает переменную currentStep.

Пример одного дочернего компонента 

<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>

Компоненты лежат на модальном уровне. Вывод журнала отображается, когда отображается неопределенное, когда я обновляю страницу, где я могу открыть модальное окно.

Может кто-нибудь помочь мне?

С уважением, А. Мелен

1 Ответ

0 голосов
/ 18 октября 2019

Я нашел себе решение. Я изменил в родительском компоненте v-bind с :data

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

, а в дочернем компоненте имя опоры 

<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>

Теперь это работает: -)

...