How to show all data of Object with Vue.js

Question

I would like to show a list in my HTML all the data contains in my Object.

This is my HTML

<template>
  <div id="builder">
<div class="container">
  <ul>
    <li v-for="item in items">{{ item.firstName }}
      <ul>
        <li>{{ item.secondLevel.secondName }}
          <ul>
            <li>{{ item.secondLevel.thirdLevel }}</li>
          </ul>
        </li>
       </ul>
     </li>
    </ul>
   </div>
  </div>
</template>

This is my data

data () {
return {
  items: [
    { firstName: 'HTML',
      secondLevel: [
        {
          secondName: 'HEADER',
          thirdLevel: ['title', 'subtitle']
        },
        {
          secondName: 'ARTICLE',
          thirdLevel: ['paragraph', 'svg', 'image']
        }
      ]
    },
    { firstName: 'CSS',
      secondLevel: [
        {
          secondName: 'SecondName CSS',
          thirdLevel: ['thirdLevel CSS', 'thirdLevel CSS']
        },
        {
          secondName: 'SecondName CSS 2',
          thirdLevel: ['thirdLevel CSS 2', 'thirdLevel CSS 2']
        }
      ]
    }
  ]
}

}

I want to show something like this:

• HTML
  • HEADER
    • title
    • subtitle
  • ARTICLE
    • paragraph
    • svg
    • image
• CSS
  • SecondName CSS
  • thirdLevel CSS
  • thirdLevel CSS
  • SecondName CSS 2
  • thirdLevel CSS 2
  • thirdLevel CSS 2

Thanks!

Answer 1

Please check this updated code,

Steps to do, just make v-for for SecondLevel Items and v-for for Third level as well

 <template>
        <div id="builder">
            <div class="container">
                <ul>
                    <li v-for="item in items">{{ item.firstName }}
                        <ul v-for="d in item.secondLevel">
                            <li>{{ d.secondName }}
                                <ul v-for="t in d.thirdLevel">
                                    <li>{{ t }}</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </template>

Answer 2

You are on a right track. In order to solve this question you need to modify the nested v-for loops.

For a working solution I came up with this:

<div id="vue-instance">
  <ul>
    <li v-for="item in items">
      {{ item.firstName }}
      <ul>
        <li v-for="secondLevel in item.secondLevel">
          {{secondLevel.secondName}}
          <ul>
            <li v-for="thirdLevel in secondLevel.thirdLevel">
              {{thirdLevel}}
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

JSFiddle