Multiple v-for in same element ?!

Hello Developers,

I work in some project => I had to put values from two different arrays
so can I use double v-for ? (in the same element )
of v-for for more than one array? (in the same element )
Thanks

Photo to clear my question:

1 Like

You should reorganize your data (in a computed property) such that you can iterate over one array of objects and use ˋobject.titleˋ and ˋobject.iconˋ.

2 Likes

it’s more complicated , I put this object example for just make my question clear

and this is an API I receive for the back-end not something I made

Thank you any way :rose:

  1. One option is to use separate v-for icons and titles
  2. When you receive API response then you can cast title and icons in the new object and use that newly created object using single v-for . As said by @fiedsch . Reorganize your data over client end .

One more way is using index from one array to get the element of other array

<div class="row" v-for="(title, index) in titles" :key="title">
   <h1>{{title}}</h1>
   <span>{{icons[index]}}</span>
</div>
8 Likes

If the total no of items in titles and icons is same then it would be perfect . If titles length is less than or greater than icons then their will be issue .

1 Like

You can either alter you array of title or you can do this as
image

I don’t think this would work. When first iterationg over titles and for each title then iterating over icons I’d expect that you get the current title combined/repeated with every icon in icons.

1 Like

it’s sounds brilliant
I will try it
Thanks

{{title}}

{{icons[index]}}
    <h1>{{title}}</h1>

    <span>{{icons[index]}}</span>

  </div>
1 Like

Capture

1 Like

Thanks a lot, That was very helpful.
Keep Going!

1 Like