通过道具传递整个对象在 Vue.js 中不起作用，而传递单个成员有效
[英] Passing an entire object via props not working in Vue.js while passing a single member works
本文介绍了通过道具传递整个对象在 Vue.js 中不起作用，而传递单个成员有效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在编写一些练习代码，您可以通过单击其中一个显示的按钮来获取一些详细的卡片数据.
我实现了显示详细的卡片信息"功能，当您通过以下代码单击橙色按钮之一时会触发该功能，
<span v-if="cardBtnChosen && card.id == selectedCard &&获得的CardInfo.id == selectedCard"><span class="cardInfo">详细的卡片信息:</span><div class="cardInfoDisplay"><div v-for="(detailedInfo,index) intainedCardInfo" :key="index"><p v-if="obtainedCardInfo[index]">{{index}} : {{obtainedCardInfo[index]}} </p><p v-else>{{index}} : NULL </p>
<br></span>
，但是由于对象obtainedCardInfo 中包含了一些其他对象，所以输出的某些部分仍然是这样的JSON 对象形式.
详细卡信息:帐号:3917674编号:3918534客户编号:998774卡角色:主要卡状态:CARD_OK截断的卡号:524804______9042卡片模板:MC_CARD卡地址:NULL用法限制 : [ { "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 } ] } ]到期:{年":2022，月":6}引脚地址:NULLregionAndEcommBlocking : { "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.
<app-detailed-info-child v-bind="obtainedCardInfo"></app-detailed-info-child>
我觉得它不工作时很奇怪，因为这应该遵循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的代码.
<div id="info-child"><p>ID是{{id}}</p>
</模板><脚本>导出默认{道具: {accountId:字符串，id:字符串，客户 ID:字符串，cardRole:字符串，卡状态:字符串，截断的卡号:字符串，卡模板:字符串，卡地址:{地址1:字符串，地址2:字符串，地址3:字符串，地址4:字符串，城市:字符串，国家:字符串，区域:字符串，邮政编码:字符串},
解决方案
你可以在你的
在DetailedInfoChild.vue
<div id="info-child"><p>ID是{{info.id}}</p><p>账户ID是{{info.accountId}}</p><p>客户 ID 是 {{info.customerId}}</p>
</模板><脚本>导出默认{道具: {信息:对象}}
然后在父组件中
<app-detailed-info-child :info="obtainedCardInfo"></app-detailed-info-child>
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
},
解决方案
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>
这篇关于通过道具传递整个对象在 Vue.js 中不起作用，而传递单个成员有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
