如何使用v-for循环遍历嵌套对象

Question

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

如屏幕截图所示，如果您选择黄色卡之一，它将以绿色和蓝色背景色显示所选卡的更多详细信息。

我通过使用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 }

Answer 1

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>