1

我目前正在编写一些练习代码，您可以通过单击显示的按钮之一来获取一些详细的卡片数据。

before_expanding

after_expanding

我实现了“显示详细的卡片信息”功能，当您通过以下代码单击橙色按钮之一时，该功能会被触发，

<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#Passing-the-Properties-of-an-Object

让我感觉更奇怪的是，当我尝试传递对象的单个成员而不是下面的整个对象时，我可以传递数据。

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

1 回答 1

3

您可以将整个获取的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>
于 2019-07-25T10:40:56.987 回答