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

Varun Sukheja
– Varun Sukheja

2020-01-30 05:53:07 +00:00
Commented Jan 30, 2020 at 5:53 — Varun Sukheja, Commented Jan 30, 2020 at 5:53
I've tried it like that. Unfortunately still doesn't work

Chris
– Chris

2020-01-30 05:54:04 +00:00
Commented Jan 30, 2020 at 5:54 — Chris, Commented Jan 30, 2020 at 5:54
are you looking to get that property.name?

Anis
– Anis

2020-01-30 06:00:14 +00:00
Commented Jan 30, 2020 at 6:00 — Anis, Commented Jan 30, 2020 at 6:00

Hardik Raval · Accepted Answer · 2020-01-30 06:41:32Z

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>

Nipun Jain · Accepted Answer · 2020-01-30 06:41:39Z

0

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.

answered Jan 30, 2020 at 6:41

Nipun Jain

1,02488 silver badges1313 bronze badges

Collectives™ on Stack Overflow

Vue V-For Loop with nested Items

2 Answers 2

1 Comment

Comments

Your Answer

Post as a guest

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related