CODEWITHSUNDEEP
vue.js
Escape95
Escape95

Reputation: 87

Display an array inside of an array with VUE

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>

Upvotes: 1

Views: 60

Answers (1)

Scornwell
Scornwell

Reputation: 605

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>

Upvotes: 2

Related Questions