Vue display output of two dimensional array

Question

I can't get my head around this one... My backend provides an API response with a two dimensonial array:

Team-category, with teams belonging to that category.

The data is returned ok, but I can't get it to display correct.

Here's the view:

<div v-for="team in teams">
                        <details class="group" open>
                            <summary
                                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                                Categorie: {{ team.categorie }}
                                <div>aantal teams: </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor"
                                        class="block h-5 w-5 group-open:hidden">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M12 4.5v15m7.5-7.5h-15" />
                                    </svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor"
                                        class="hidden h-5 w-5 group-open:block">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                                    </svg>
                                </div>
                            </summary>
                            <div class="pb-4 text-secondary-500">
                                <div v-for="temp in team"> Hier komt informatie over {{
                        temp }}
                                </div>
                            </div>
                        </details>
                    </div>

The output for Categorie: Onder-7 is:

Hier komt informatie over Onder-7
Hier komt informatie over [ { "id": 1, "teamnaam": "JO7-1", "categorie": 1, "extra_informatie": "bla", "laatste_update": "2024-03-30T00:00:00Z" }, { "id": 2, "teamnaam": "JO7-2", "categorie": 1, "extra_informatie": "bla", "laatste_update": "2024-03-30T00:00:00Z" } ]

so the first time I loop over all the team categories, which is fine. within each run I loop over the team (temp) but this does not work.

I'm missing something...

Answer 1

Solved. I had to itterate over team.teams in the second V-FOR