How do I loop over this nested array in Vue wth v-for?

Question

I am aiming to create a navigation menu, where each div will have a header and a list of links

<div>
  <h1>Header</h1>
    <ul>
      <li>
        <a href="#">Link</a>
      </li>
    </ul>
</div>

I want to add the link data to the data() in Vue, and I have attempted it like so:

<script>
    export default {
        data() {
            return {
                links: {
                    columns: [
                        {
                            heading: 'Feature',
                            attr: [
                                {
                                    text: 'Something'
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }
</script>

And here is the HTML with the attempt to use v-for

<template>
    <div class="pt-8 sm:pt-16 h-screen navigation-background-gradient">
        <nav class="mx-4 sm:mx-48">
            <div class="sm:grid sm:grid-cols-3 sm:gap-56">
                <div v-for="link in links.columns">
                    <h1 class="mb-5 text-white font-semibold font-montserrat tracking-wider uppercase text-2xl text-shadow-glow">{{ link.heading }}</h1>
                    <ul class="space-y-4">
                        <li>
                            <a class="block text-lg text-menu-link font-inter font-medium tracking-wider" href="#">{{ link.attr }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</template>

So I can access the heading fine, but I can't access attr.text

If I echo out attr.text I get [ { "text": "Something" } ] but I aren't sure how to get to it. I thought I may need to do another loop, as it's an array, but I couldn't work out the correct combination to use to make it show.

I feel like I am close and missing something obvious, but I can't see it. Can anyone suggest me where am I doing wrong ?

Dcoder14 · Answer 1 · 2020-05-05T10:52:28.333

0

@Chris, attr is an array so you have to access this by index. So for your case, you can do like

{{ link.attr[0].text }}

As your code shows attr array contains only one item so I have done attr[0] as to get first item of an array we use 0 index.
And If your attr array contains more than one element then you have to loop through another loop as used in below link
Nested loop in Vue

edited May 05 '20 at 10:52

answered May 04 '20 at 19:23

Dcoder14

1,831
3
12
22

I intend on having more than one item, what's the best way to get the index? – Chris Mellor May 04 '20 at 19:28
you have to add another loop @ChrisMellor – Dcoder14 May 04 '20 at 19:32
That's the bit I seem to be struggling with, do you have any examples of using a second loop for that array? @Dcoder – Chris Mellor May 04 '20 at 19:37
plz check this https://stackoverflow.com/questions/40029856/nested-loop-in-vue – Dcoder14 May 04 '20 at 19:50

score 0 · Answer 2 · answered May 05 '20 at 10:30

Thanks to @Dcoder, who pointed me in the right direction, I was able to work it out. I will post here in case others come across this - hopefully it might be helpful!

I had to do another loop on the <li> but using the array from the first loop (links.columns), so my second loop consists of:

<li v-for="attribute in link.attr">
  <a href="#">{{ attribute.text }}</a>
</li>

As you can see, link stores the rest of the array data, and as attr is also an array, I can loop through that.

How do I loop over this nested array in Vue wth v-for?

2 Answers2