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

【问题标题】：How to loop through nested objects using v-for loop如何使用 v-for 循环遍历嵌套对象
【发布时间】：2019-12-01 13:37:23
【问题描述】：

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

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

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

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

How to loop through a plain JavaScript object with the objects as members?

我理解你应该继续循环的想法，以防成员是另一个对象，而不是原始数据类型，但我不知道如何在 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 }

【问题讨论】：

那么，你的问题是，obtainedCardInfo 不是一个可以循环的数组？你可以解决这个问题，例如通过调用将对象转换为所需形式的方法 (<div v-for="(detailedInfo,index) in convertToArray(obtainedCardInfo)" :key="index">)。更好的方法是将对象作为道具传递给新组件。在那里，您可以创建一个计算属性，将对象转换为可循环的结构。或者您能否详细说明问题出在哪里？
问题在于obtainedCardInfo 只是obtainedCardsInfo 中的对象之一（注意'Card' 后面有's'）数组。如果你想通过计算属性获取obtainedCardInfo 的数据，你必须指定你想要它来自obtainedCardsInfo 数组的哪个索引。但我不知道该怎么做。
如果您使用另一个组件，您可以将单个对象作为 v-for 循环中的 prop 传递给组件。然后子组件只接收一个对象而不是整个数组。然后它可以具有计算属性。然后有多个具有不同道具数据的子组件。示例：<div v-for="element in arrayOfElements"><child-component :data="element" /></div> 然后您可以在 child-component 中定义计算属性。
我目前正在尝试这样做，但出现了另一个问题。 stackoverflow.com/questions/57198880/…
很高兴您能解决问题（在另一个问题中）????

标签： vue.js v-for nested-object

【解决方案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>

【讨论】：

你能告诉我我在上面的代码中演示的逻辑的哪一部分应该移动到计算中吗？