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

by

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

0👍

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.

Leave a comment