Vue V-For Loop with nested Items

Question

I'm trying to v-for an array with nested Items:

This ist the main array:

export default {
  data () {
    return {
      arr: [{
        mainId: 8,
        subItems: [{
          subId: 1,
          subSubItems: {
            subSubId: 1,
            name: 'Name1'
          }
        }]
      }, {
        mainId: 5,
        subItems: [{
          subId: 2,
          subSubItems: {
            subSubId: 3,
            name: 'Name2'
          }
        },
        {
          subId: 3,
          subSubItems: {
            subSubId: 4,
            name: 'Name3'
          }
        }]
      }]
    }
  }
 }

I've tried to loop through this array like this:

<v-card v-for="subItem in arr" :key="subItem.mainId">
                {{subItem.mainId}}
  <p v-for="subSubItem in subItem.subSubId" :key="subSubItem.subSubId"></p>
                {{subSubItem.name}}
</v-card>

But unfortunately I don't get any output: The Console Error: "Cannot read property 'subSubId' of undefined"

What mistake did I make here?

Does this answer your question? [Nested loop in Vue](https://stackoverflow.com/questions/40029856/nested-loop-in-vue) — Varun Sukheja, Jan 30 '20 at 05:53

Hardik Raval · Accepted Answer · 2020-01-30T06:41:32.033

Try this:

new Vue({
    el:"#app",
    data: { 
        arr: [
        {
            mainId: 8,
            subItems: [
            {
                subId: 1,
                property: {
                    subSubId: 1,
                    name: 'Name1'
                }
            }]
        },
        {
            mainId: 5,
            subItems: [{
                subId: 2,
                    property: {
                        subSubId: 3,
                        name: 'Name2'
                    }
                },
                {
                    subId: 3,
                    property: {
                        subSubId: 4,
                        name: 'Name3'
                    }
                }
            ]
        }]    
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="item in arr" :key="item.mainId">
            MainId : {{item.mainId}}
            <p v-for="subitem in item.subItems" :key="subitem.subId">
                SubItem Name : {{subitem.property.name}}
                <hr/>
            </p>
        </div>
    </div>
</body>
</html>

I think it will give an error as `subitem.subSubId` not exists. It should be `subitem.subId` or `subitem.property.subSubId`. — Nipun Jain, Jan 30 '20 at 06:38

score 0 · Answer 2 · answered Jan 30 '20 at 06:41

Your code is correct but with some typo:

<v-card v-for="subItem in arr" :key="subItem.mainId">
  {{subItem.mainId}}
  <p v-for="subSubItem in subItem.subItems" :key="subSubItem.subId">
    {{subSubItem.subSubItems.name}}
  </p>
</v-card>

as subItem.subSubId don't event exist it have to be subItem.subItems and your are setting {{subSubItem.name}} (which don't exist either) outside <p> tag. So, I have changed your code. Hope it helps.

Vue V-For Loop with nested Items

2 Answers2