Passing an entire object via props not working in

问题:

I'm currently working on some practice code where you can fetch some detailed card data by clicking one of the displayed buttons.

I implemented the "show the detailed card info" function which gets triggered when you click one of the orange buttons by the following code,

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

, but as the object obtainedCardInfo contains some other objects in it, some parts of the output are still in the form of JSON object like this.

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 }

I got some advice that I'd probably need to make another component as a child component, so I can iterate through the obtainedCardInfo inside the child component, and then import the child component like this.

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

So I began to work on making another component, but here comes another problem. I can't pass the object data to the component DetailedInfoChild.vue that I made, when I tried to pass the data as the following code.

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

I thought it was weird when it was not working, because this should follow the syntax from the official documentation of Vue.js.

https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

And what feels even weirder to me is that I could pass the data when I tried passing a single member of the object instead of the entire object as below.

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

What could I be doing wrong?

And here is the code of the component DetailedInfoChild.vue that I wrote.

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

回答1:

You can pass the whole obtainedCardInfo as an object prop in your <app-detailed-info-child>

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

Then in the parent component

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