Передача всего объекта через подпорки, не работающие в Vue.js, при передаче одного члена работает

Question

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

Я реализовал функцию "Показать подробную информацию о карте", которая срабатывает при нажатии одной из оранжевых кнопок с помощью следующего кода:

<div v-for="(obtainedCardInfo, index) in obtainedCardsInfo">
  <span v-if="cardBtnChosen && card.id == selectedCard && obtainedCardInfo.id == selectedCard">                                 
    <span class="cardInfo">DETAILED CARD INFO:</span>  
      <div class="cardInfoDisplay">
        <div v-for="(detailedInfo,index) in obtainedCardInfo" :key="index"> 
          <p v-if="obtainedCardInfo[index]"> {{index}} : {{obtainedCardInfo[index]}} </p>
          <p v-else> {{index}} : NULL </p>
        </div>
      </div> <br>
  </span> 
</div>        

, но как объект obtainedCardInfo содержит некоторые другие объекты в нем, некоторые части вывода по-прежнему в форме объекта JSON, как это.

DETAILED CARD INFO:
accountId : 3917674

id : 3918534

customerId : 998774

cardRole : MAIN

cardStatus : CARD_OK

truncatedCardNumber : 524804______9042

cardTemplate : MC_CARD

cardAddress : NULL

usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]

expiration : { "year": 2022, "month": 6 }

pinAddress : NULL

regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }

Я получил несколько советов, которые мне, вероятно, нужно сделать другим компонентом в качестве дочернего компонента, поэтому я могу перебрать obtainedCardInfo внутри дочернего компонента, а затем импортируйте дочерний компонент следующим образом.

<div v-for="element in arrayOfElements"><child-component :data="element" /></div>

Поэтому я начал работать над созданием другого компонента, но тут возникает другая проблема. Я не могу передать данные объекта в компонент DetailedInfoChild.vue что я сделал, когда я попытался передать данные в виде следующего кода.

<div class="cardInfoDisplay">
    <app-detailed-info-child v-bind="obtainedCardInfo"></app-detailed-info-child>
</div>

Я думал, что это странно, когда он не работает, потому что это должно следовать синтаксису из официальной документации Vue.js.

https://vuejs.org/v2/guide/components-props.html

И что еще более странно для меня, так это то, что я мог передавать данные, когда пытался передать один элемент объекта вместо всего объекта, как показано ниже.

<app-detailed-info-child v-bind:id="obtainedCardInfo.id"></app-detailed-info-child>

Что я могу делать не так?

А вот и код компонента DetailedInfoChild.vue что я написал.

<template>
    <div id="info-child">
        <p>The ID is {{ id }}</p>
    </div>
</template>

<script>
export default {
    props: {  
                accountId: String,
                id: String,
                customerId: String,
                cardRole: String,
                cardStatus: String,
                truncatedCardNumber: String,
                cardTemplate: String,
                cardAddress: {
                    address1: String,
                    address2: String,
                    address3: String,
                    address4: String,
                    city: String,
                    country: String,
                    region: String,
                    zipCode: String
                },

Answer 1

Вы можете передать весь полученный CardInfo как объектную опору в вашем <app-detailed-info-child>

В DetailedInfoChild.vue

<template>
    <div id="info-child">
        <p>The ID is {{info.id}}</p>
        <p>The account ID is {{info.accountId}}</p>
        <p>The customer ID is {{info.customerId}}</p>
    </div>
</template>
<script>
    export default {
        props: {
            info: Object
        }
    }
</script>

Затем в родительском компоненте

<app-detailed-info-child :info="obtainedCardInfo"></app-detailed-info-child>