通过道具传递整个对象在 Vue.js 中不起作用，而传递单个成员有效

Question

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

我实现了 "show the detailed card info" 功能，当您通过以下代码单击其中一个橙色按钮时会触发该功能，

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

Answer 1

您可以在 <app-detailed-info-child>

中将整个 objectCardInfo 作为对象道具传递

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

通过道具传递整个对象在 Vue.js 中不起作用，而传递单个成员有效

Passing an entire object via props not working in Vue.js while passing a single member works

vue.js

vue-component

vue-props