title: How to loop through nested objects using v-for loop
body: <p>I'm working on some practice code that deals with card information, in which you can display the chosen card's detailed information by clicking one of the cards on the screen. </p>
  
  <p>As demonstrated in the screenshots, if you choose one of the yellow cards, it displays more detailed information of the chosen card with green and blue background color. </p>
  
  <p><a href="https://i.stack.imgur.com/O1QIW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O1QIW.png" alt="before_expanding"></a></p>
  
  <p><a href="https://i.stack.imgur.com/TGjbC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TGjbC.png" alt="enter image description here"></a></p>
  
  <p>I implemented this by using v-for loop, but the problem is that the detailed card information is a JSON object that contains multiple JSON objects inside, and I haven't been successful in displaying all of the members in non-JSON form. </p>
  
  <p>I found some pages (like the link below) where some ways to loop through nested objects were discussed, but it was plain JavaScript code and I couldn't use the same strategy for v-for loop. </p>
  
  <p><a href="https://stackoverflow.com/questions/921789/how-to-loop-through-a-plain-javascript-object-with-the-objects-as-members">How to loop through a plain JavaScript object with the objects as members?</a></p>
  
  <p>I understand the idea that you should just continue the loop in case the member is another object, not a primitive data type, but I don't know how to implement the same logic in v-for loop. </p>
  
  <p>Could anyone tell me how to do it? </p>
  
  <p>Here is my code. </p>
  
  <p>(v-for loop part)</p>
  
  <pre><code>&lt;div v-for="(obtainedCardInfo, index) in obtainedCardsInfo"&gt;
    &lt;span v-if="cardBtnChosen &amp;&amp; card.id == selectedCard &amp;&amp; obtainedCardInfo.id == selectedCard"&gt;                                 
      &lt;span class="cardInfo"&gt;DETAILED CARD INFO:&lt;/span&gt;  
        &lt;div class="cardInfoDisplay"&gt;
          &lt;div v-for="(detailedInfo,index) in obtainedCardInfo" :key="index"&gt; 
            &lt;p v-if="obtainedCardInfo[index]"&gt; {{index}} : {{obtainedCardInfo[index]}} &lt;/p&gt;
            &lt;p v-else&gt; {{index}} : NULL &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;br&gt;
    &lt;/span&gt; 
  &lt;/div&gt;        
  </code></pre>
  
  <p>and the output for my current code. </p>
  
  <pre><code>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 }
  </code></pre>