通过道具传递整个对象在 Vue.js 中不起作用,而传递单个成员有效
Passing an entire object via props not working in Vue.js while passing a single member works
我目前正在编写一些练习代码,您可以通过单击其中一个显示的按钮来获取一些详细的卡片数据。
我实现了 "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
},
您可以在 <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>
我目前正在编写一些练习代码,您可以通过单击其中一个显示的按钮来获取一些详细的卡片数据。
我实现了 "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
},
您可以在 <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>