How do i display a array inside of an array in VUE?
I've tried it with the code below, but is doesn't seem to be right.
<table class="table table-border">
<thead>
<tr>
<th v-for="(name, index) in attributes" v-html="attributes[index].name"></th>
</tr>
</thead>
<tr v-for="(values, index) in attributes">
<td v-for="(name, index) in values" v-html="values[index].name"></td>
</tr></table>
Without seeing the structure of the object it is difficult to help you completely, additionally what are you trying to achieve> I see the basics for setting up a table, but what part of the array needs to be applied to the table?
If I have the object below (Typescript Type for clarity):
interface Parent {
ID: string,
Name: string,
Age: number,
ParentOf: Array<Child>
}
interface Child{
Name: string,
FavoriteNumbers: Array<number>
}
Below I am iterating through the the parents children to discover the favorite numbers of each child.
<div>
<div v-for="(child, index) in Parent.ParentOf">
<p>{{Parent.Name}} <br />
{{child.Name}} </p>
<ul>
<li v-for="number in child.FavoriteNumbers">
Favorite Number: {{number}} <!--We are iterating through an array of an array here -->
</li>
</ul>
</div>
</div>
