0

我正在编写一些处理卡片信息的练习代码，您可以在其中通过单击屏幕上的一张卡片来显示所选卡片的详细信息。

如屏幕截图所示，如果您选择其中一张黄牌，它会以绿色和蓝色背景显示所选牌的更多详细信息。

before_expanding

在此处输入图像描述

我通过使用v-for循环实现了这个，但是问题是详细的卡片信息是一个JSON对象，其中包含多个JSON对象，并且我没有成功以非JSON形式显示所有成员。

我发现一些页面（如下面的链接）讨论了一些循环嵌套对象的方法，但它是纯 JavaScript 代码，我不能对 v-for 循环使用相同的策略。

如何循环以对象为成员的普通 JavaScript 对象？

我理解如果成员是另一个对象而不是原始数据类型，您应该继续循环的想法，但我不知道如何在 v-for 循环中实现相同的逻辑。

谁能告诉我该怎么做？

这是我的代码。

（v-for 循环部分）

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

以及我当前代码的输出。

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

1 回答 1

0

v-for 简单地遍历数组或对象键。

v-for 遍历数组中的每个元素

v-for 还遍历对象中的键

您还应该将逻辑移动到计算方法

<template>
<p v-for:"item, index in arr" />
     {{ item  }}
     {{ index }}
<p v-for:"item, key in obj" />
     {{ item  }}
     {{  key  }}
<br />
</template>
<script>
export default {
    data() {
       return {
           arr:[1,2,3,4,5],
           obj: { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e' }
        }
    },
    computed: {
        // do computation here
        doSomething() {
        }
    }
}
</script>
于 2019-07-23T16:31:22.437 回答